点击后展开/展开链接

问题描述 投票：1回答：4

我在这里只能使用折叠菜单。我设法找到了一个完全可以实现我想要的脚本的脚本，但恰恰相反。在脚本中，默认情况下，链接为“扩展”。我希望默认情况下我的链接是收缩的，当您单击它时，它会展开。

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

代码：

<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>
html css list expand collapse
4个回答
3
投票

只需反转CSS：

CSS：

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

我希望我对你的理解正确。我通常为此使用jQuery ...这是一个小演示：http://cssdeck.com/labs/omya4ax9HTML：

<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

0
投票

您可能想看看这个简单的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

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. 同时，我根据菜单的状态切换类以显示向上或向下的人字形-分别展开或折叠。

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

<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，除非您想对菜单的外观进行样式设置。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.