展开/折叠jquery中的所有列表
展开/折叠jquery中的所有列表
提问于 2015-08-15 04:25:50
我正在尝试在网页上放置一个按钮，它使用jquery来构建可折叠列表，以展开/折叠所有列表。然而，我对jquery和javascript编码还是相当陌生的，所以我遇到了一些问题。我已经把按钮放进去了，但是它的代码没有响应，当我单击它时，我在检查器中收到了这个错误："TypeError: HTMLInputElement不是一个函数(计算'ShowHide()')“，我该如何纠正这段代码，使它成功地展开/折叠？
该按钮的代码如下：
<script type="text/javascript" src="js/jquery-1.11.2.min.js">
document.getElementById('collapsible').addEventListener("click", ShowHide);
var collapsed = $('collapsible').hide();
function ShowHide(event) {
if (collapsed == true) {
$('collapsible').show();
collapsed = false;
}
else {
$('collapsible').hide();
collapsed = true;
}
}
</script>在每个正被展开/折叠的ul和li元素上放置id“可折叠的”。
按如下方式将按钮放入：
<input type="button" id="ShowHide" onclick="ShowHide()" value="Show/Hide">编辑:我一直在尝试展开/折叠所有要在这个布局上使用的内容。jsfiddle.net/TLittler/9ndzm3cc
回答 3
Stack Overflow用户
发布于 2015-08-15 04:39:16
这就是我如何去实现你想要的效果。
$('#collapsible1').click("click", showHide);
var collapsible = $('.collapsible');
collapsible.hide();
function showHide() {
if(collapsible.is(':hidden'))
collapsible.show();
else
collapsible.hide();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="collapsible1">Collapse</button>
<dl class="collapsible">
<dh>List Header 1</dh><dl>List Item</dl><dl>List Item</dl><dl>List Item</dl>
</dl>
<dl class="collapsible">
<dh>List Header 2</dh><dl>List Item</dl><dl>List Item</dl><dl>List Item</dl>
</dl>
<dl>
<dh>List Header 3</dh><dl>List Item</dl><dl>List Item</dl><dl>List Item</dl>
</dl>
Stack Overflow用户
发布于 2015-08-15 04:37:38
document.getElementById('collapsible1').addEventListener("click", ShowHide);
var collapsed = $('collapsible').hide();
$('#ShowHide').click(function ShowHide(event) {
if (collapsed == true) {
$('collapsible').show();
collapsed = false;
}
else {
$('collapsible').hide();
collapsed = true;
}
})你不应该使用onclick()，这是不好的做法。
此外，您还可以使用'collabsible‘和’cliumsible1‘。我假设“可折叠”是你想要折叠的项目？
Stack Overflow用户
发布于 2015-08-15 05:18:33
您可以尝试这样做。这可以在几行代码中完成，这就是jquery :)的美妙之处。下面是测试代码：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#ShowHide").click(function() {
if($("#collapsable").is(":hidden"))
$("#collapsable").show("fast");
else $("#collapsable").hide("slow");;
});
});
</script>
<div id="collapsable">Hello</div>
<input type="button" id="ShowHide" value="Show/Hide">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32018127
复制相关文章
相似问题
腾讯云开发者
