Question

我在这里坚持使用折页菜单。我设法得到了一个脚本，它完全符合我的要求但是反过来。在脚本中，默认情况下链接为“Expanded”。我希望我的链接默认签约，当你点击它时，它会扩展。

任何帮助都会非常感激！谢谢:)

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">

.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display: none; list-style-type:none;}
@media print { .hide, .show { display: none; } }

</style>
</head>
<body>

<p>Lorem ipsum...</p>
<div>
<a href="#" class="hide">[Link]</a>
<a href="#" class="show">[Link]</a>
<ol id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
</div>

</body>
</html>

Answer 1

只需反转css：

CSS：

#list, .show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:block; }

Answer 2

我希望我理解你。我通常使用jquery ... 这是一个小小的演示：http://cssdeck.com/labs/omya4ax9 HTML：

<a href="#" class="hide" data-toggle="#list">Toggle: show</a>
<ol id="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ol>

CSS：

#list {
  display: none;
}

#list.open {
  display: block;  
}

JS：

$('[data-toggle]').on('click', function(){
  var id = $(this).data("toggle"),
      $object = $(id),
      className = "open";

  if ($object) {
    if ($object.hasClass(className)) {
      $object.removeClass(className)
      $(this).text("Toggle: show");
    } else {
      $object.addClass(className)
      $(this).text("Toggle: hide");
    }
  }
});

TJL

Answer 3

您可能想看看这个简单的Javascript解决方案。

单击某个组件可以调用方法，以使特定元素在可见或折叠模式之间切换。

一个Javascript示例：

function toggle(elementId) {
    var ele = document.getElementById(elementId);
    if(ele.style.display == "block") {
        ele.style.display = "none";
    }
    else {
        ele.style.display = "block";
    }
}

您可以将方法调用到 href 或 onclick 事件中。

原帖：snip2code - How to collapse a div in html

Answer 4

如果有人还在寻找，这里是一个简单的jQuery代码，用于扩展和折叠任何内容，只要您在变量声明中正确选择了元素即可。

我将您的id =“ list”更改为class =“ list”。这样，代码可用于多个命令列表。您可以将其保留为id，但要知道您将需要为每个元素编写一个单独的脚本。

<ol class="list">
    <li>
        <span class="menu glyphicon glyphicon-menu-down">&nbsp;MENU</span>
        <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
            <li>Menu Item 4</li>
        </ul>
    </li>
</ol>

<script>
    var $menu = $('ol.list li span.menu');
    $menu.next().hide();
    $menu.on('click', function () {
        $(this).toggleClass('glyphicon-menu-up glyphicon-menu-down').next().slideToggle();
    })
</script>

在上面的脚本代码中，我声明并初始化了我正在使用的变量，该变量指向包含带有列表类的有序列表的任何元素，但是我已深入到该元素以达到跨度和实际菜单。
页面加载时，菜单会自动折叠。如果要在页面加载时显示它，则需要删除$ menu.next（）。hide（）行。您还需要翻转.toggleClass（）中出现的on click函数中的类。
然后，我使用变量onClick函数打开或展开您单击的有序列表。
同时，我正在切换类以根据菜单的状态（分别展开或折叠）显示上下V形。

如果您想在鼠标悬停在菜单上时展开或折叠菜单；您需要将脚本更改为此：

<script>
    var $menu = $('ol.list li span.menu');
    $menu.next().hide();

    $menu.on('mouseover mouseout', function () {
        $(this).toggleClass('glyphicon-menu-up glyphicon-menu-down').next().slideToggle();
    })
</script>

这非常简单明了，您可以在任何要显示和隐藏内容的地方使用它。如您所见，它只需要较少的代码，并且不需要弄乱CSS，除非您想对菜单的外观进行样式设置。

尝试一下！我希望这对某人有帮助。

点击时折叠/扩展链接

4 个答案: