1

我在这里被折叠菜单困住了。

我设法得到了一个脚本，该脚本完全符合我的要求，但有点相反。在脚本中，链接默认为“扩展”。我希望我的链接默认收缩，当您单击它时，它会展开。

任何帮助将非常感激！谢谢 ：）

.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;
  }
}
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
  </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>

4

4 回答 4

3

只需反转css：

CSS：

#list, .show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:block; }
于 2013-08-08T09:58:43.790 回答
3

我希望我理解你的正确。我通常为此使用 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

于 2013-08-08T10:03:06.490 回答
0

You might want to give a look at this simple Javascript solution.

A method can be invoked when clicking on some component to make a specific element toggle between visible or collapsed mode.

A Javascript example:

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

You can invoke the method into href or onclick event.

Original post: snip2code - How to collapse a div in html

于 2014-01-08T20:56:21.857 回答
0

如果有人还在寻找，这里有一个简单的 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>
  1. 在上面的脚本代码中，我已经声明并初始化了我使用的变量，该变量指向包含具有列表类的有序列表的任何元素，但我已经深入到该元素以到达跨度和实际菜单。
  2. 当页面加载时，菜单会自动折叠。如果你想让它在页面加载时显示，你需要删除 $menu.next().hide() 行。您还需要翻转 .toggleClass() 中出现的 on click 函数中的类。
  3. 然后我使用变量 onClick 函数打开或展开您单击的有序列表。
  4. 同时，我根据菜单的状态切换班级以显示向上或向下的 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，除非您想设置菜单外观的样式。

试试看！我希望这可以帮助别人。

于 2020-01-24T20:49:31.090 回答