Javascript 展开/折叠jquery中的所有列表

我试图在一个网页上放置一个按钮，该网页使用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>

document.getElementById（“可折叠”）.addEventListener（“单击”，显示隐藏）；
var collapsed=$（'collapsable'）.hide（）；
函数ShowHide（事件）{
如果（折叠==真）{
$（‘可折叠’）.show（）；
折叠=假；
}
否则{
$（‘可折叠’）.hide（）；
崩溃=真；
}
}

id“可折叠”放置在正在展开/折叠的每个ul和li元素上

按钮放置在以下位置：

<input type="button" id="ShowHide" onclick="ShowHide()" value="Show/Hide">

编辑：我一直在尝试展开/折叠所有用于此布局的内容。jsfiddle.net/TLittler/9ndzm3cc

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（），这是一种不好的做法

---

此外，还有“可协作”和“可折叠1”。我假设“可折叠”是您希望折叠的项目？

这就是我如何实现您想要的效果的方法

$（“#可折叠1”）。单击（“单击”，显示隐藏）；
可折叠变量=$（'.collapsable'）；
可折叠的；
函数showHide（）{
if（可折叠的.is（':hidden'））
可折叠的。show（）；
其他的
可折叠的；
}

崩溃
列表标题1列表项列表项列表项
列表标题2列表项列表项列表项
列表标题3列表项列表项列表项

您可以尝试这样做。这可以通过几行来完成，这就是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">

$（函数（）{
$（“#显示隐藏”）。单击（函数（）{
如果（$（“#可折叠”）。是（“：隐藏”））
美元（“#可折叠”）。显示（“快速”）；
else$（“可折叠”）.hide（“慢速”）；；
});
});         
你好

Answer将被澄清，如果您证明他为什么不应该使用onclick（）。：）几乎在我使用过的每一个例子中，我都会遇到问题。这是我的理由，所以我使用了。点击jQuery？哈哈，我很抱歉，它本来是可折叠的，不是可折叠的1在修改了这个脚本之后，我意识到我应该提到我正在使用jquery的移动用户界面。我一直在尝试展开/折叠所有用于此布局的内容。