如何折叠所有菜单项

时间:2016-09-01 23:46:09

标签: javascript

我想要折叠所有菜单项。

我有菜单(稍后将使用jQuery添加)

 <ul class="cd-accordion-menu animated">
    <li class="has-children">
        <input type="checkbox" name ="group-1" id="group-1" checked>
        <label for="group-1">Group 1</label>

        <ul id="ulm">
            <li class="has-children">
                <input type="checkbox" name ="sub-group-1" id="sub-group-1" checked>
                <label for="sub-group-1">Sub Group 1</label>

                <ul id="ulm">
                    <li><a href="#0">Image</a></li>
                    <li><a href="#0">Image</a></li>
                </ul>
            </li>               
            <li><a href="#0">Image</a></li>
            <li><a href="#0">Image</a></li>
        </ul>
    </li>
</ul>

我使用jQuery

<a id="go" href="#">Collapsed</a>

<script>
    $(document).ready(function () {
        $('#go').click(function () {
            $('#ulm').css('display', 'none');
        });
    });
</script>

但是菜单没有折叠

这是链接文章https://codyhouse.co/gem/css-multi-level-accordion-menu/

1 个答案:

答案 0 :(得分:0)

如果你想要折叠菜单,你应该隐藏(display:none)未经检查元素的children元素。

<script>
function MenuCollapsed() {
     document.getElementsByTagName("input")[0].removeAttribute("checked");;
     document.getElementsByTagName("ul")[1].style="display:none";
}
</script>

使用jQuery会非常简单。

你的ajax意味着jQuery?