单击时折叠/展开链接答案

【问题标题】：Collapsing/Expanding link on click单击时折叠/展开链接
【发布时间】：2013-08-09 23:33:13
【问题描述】：

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

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

任何帮助将不胜感激！谢谢:)

.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>

【问题讨论】：

你从哪里得到这个脚本？
你能发布脚本的相关部分吗？
cssportal.com/css3-preview/…
现在将整个代码添加到帖子中。希望它有所帮助:)

标签： html css list expand collapse

【解决方案1】：

只需反转 css：

CSS：

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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

【讨论】：

【解决方案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，除非您想设置菜单外观的样式。

试试吧！我希望这对某人有所帮助。

【讨论】：