Html 单击时折叠/展开链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18122899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Collapsing/Expanding link on click
提问by GetGalax
I'm stuck with a folding menu here.
我在这里被折叠菜单卡住了。
I managed to get my hands on a script that does exactly what I want but in kind of reverse. In the script the link is "Expanded" by default. I want my link to be contracted by default and when you click it, it expands.
我设法得到了一个脚本，它完全符合我的要求，但有点相反。在脚本中，链接默认为“扩展”。我希望我的链接默认收缩，当您单击它时，它会展开。
Any help would be really appreciated! Thanks :)
任何帮助将非常感激！谢谢 ：）
.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>回答by Abhitalks
Just invert the css:
只需反转css：
CSS:
CSS：
#list, .show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:block; }
回答by NinjaOnSafari
I hope i understood you right. I usually use jquery for this... Here is a little demo: http://cssdeck.com/labs/omya4ax9HTML:
我希望我理解你正确。我通常为此使用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:
CSS：
#list {
display: none;
}
#list.open {
display: block;
}
JS:
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
天成
回答by Dominique Terrs
You might want to give a look at this simple Javascript solution.
您可能想看看这个简单的 Javascript 解决方案。
A method can be invoked when clicking on some component to make a specific element toggle between visible or collapsed mode.
当单击某个组件以使特定元素在可见或折叠模式之间切换时，可以调用一个方法。
A Javascript example:
一个 Javascript 示例：
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 hrefor onclickevent.
您可以在href或onclick事件中调用该方法。
Original post: snip2code - How to collapse a div in html
回答by NMeneses
In case anyone is still looking, here is a simple jQuery code to expand and collapse anything, so long as you get your element selection correct in the variable declaration.
如果有人还在看，这里有一个简单的 jQuery 代码来展开和折叠任何东西，只要你在变量声明中正确选择了元素。
I changed your id="list" to class="list". This way the code is available to more than one ordered list. You can leave it as an id, but just know you will need to write a separate script for each of those elements.
我将您的 id="list" 更改为 class="list"。这样，代码可用于多个有序列表。您可以将其保留为 id，但要知道您需要为每个元素编写单独的脚本。
<ol class="list">
<li>
<span class="menu glyphicon glyphicon-menu-down"> 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>
- In the above script code, I've declared and initialized the variable I'm using which points to any element containing an ordered list with a class of list, but I've drilled down into that element to reach the span and actual menu.
- When the page loads, the menu is automatically collapsed. If you want to have it show when the page loads, you will need to removed the $menu.next().hide() line. You will also need to flip the classes in the on click function that appear in .toggleClass().
- Then I use the variables onClick function to open or expand the ordered list you've clicked on.
- At the same time, I'm toggling the class to show an up or down chevron depending on the state of the menu - expanded or collapsed respectively.
- 在上面的脚本代码中，我已经声明并初始化了我正在使用的变量，该变量指向包含具有列表类的有序列表的任何元素，但我已经深入到该元素以到达跨度和实际菜单。
- 当页面加载时，菜单会自动折叠。如果要在页面加载时显示它，则需要删除 $menu.next().hide() 行。您还需要翻转出现在 .toggleClass() 中的点击函数中的类。
- 然后我使用变量 onClick 函数打开或展开您单击的有序列表。
- 同时，我根据菜单的状态切换类以显示向上或向下 V 形符号 - 分别展开或折叠。
If you wanted to expand or collapse the menu when the mouse is hovered over it; you would need to change the script to this:
如果您想在鼠标悬停在菜单上时展开或折叠菜单；您需要将脚本更改为：
<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>
It's pretty simple and straight forward and you can use it anywhere where you want to show & hide content. And as you can see, it takes less code and you don't need to mess with CSS unless you want to style the look of your menu.
它非常简单直接，您可以在任何想要显示和隐藏内容的地方使用它。正如您所看到的，它需要的代码更少，而且除非您想设置菜单外观的样式，否则您不需要弄乱 CSS。
Try it out! I hope this helps someone.
试试看！我希望这可以帮助别人。
