Question

我想首先隐藏所有子菜单，然后点击span.exp并显示所有子菜单。

这是我的HTML：

<div class="ym-gbox">
    <ul>
        <li>menu1</li>
        <li>menu2</li>
        <ul>
            <li>submenu1</li>
            <li>submenu2</li>
        </ul>
        <ul>
            <li>submenu1</li>
            <li>submenu2</li>
        </ul>  
    </ul>
</div>

<div id="expandbutton">
    <span class="button expand">expand</span>
</div>

和我的jQuery：

jQuery(document).ready(function($) {
    $('.ym-gbox ul li ul li').hide();

        $('.expand').click(function() {
        if ($(this).hasClass('act')) {
            $(this).removeClass('act');
            $('.ym-gbox ul li').not('.menuactive').children('ul').children('li').slideUp('fast');
        } else {
            $(this).addClass('act'); 
            $('.ym-gbox ul li ul li').slideDown('fast');  
        }

    });
});

我做错了什么？

Answer 1

您的选择器不会选择您期望的元素，我已修改了标记，请尝试以下操作：

<div class="ym-gbox">
    <ul>
        <li class='expand'>menu1</li>
        <ul>
            <li>submenu1</li>
            <li>submenu2</li>
        </ul>
        <li class='expand'>menu2</li>
        <ul>
            <li>submenu1</li>
            <li>submenu2</li>
        </ul>
    </ul>
</div>

jQuery(document).ready(function() {
    $('.ym-gbox > ul ul').hide();
    $('.ym-gbox li.active').next().show();

    $('.expand:not(.active)').click(function() {
         $(this).addClass('active').siblings('li').removeClass('active')
         $(this).siblings('ul').slideUp();
         $(this).next('ul').slideDown()                
    });
});

http://jsfiddle.net/U5P5Y/

Answer 2

这是因为你有无效的HTML。它应该是这样的：

<div class="ym-gbox">
    <ul>
        <li>menu1
            <ul>
                <li>submenu1</li>
                <li>submenu2</li>
            </ul>  
        </li>
        <li>menu2
            <ul>
                <li>submenu1</li>
                <li>submenu2</li>
            </ul>
        </li>
    </ul>
</div>

<div id="expandbutton">
    <span class="button expand">expand</span>
</div>

代码：http://jsfiddle.net/HCE9j/4/

Answer 3

为什么不给你的子菜单一个自己的id并调用类似的东西：

$(".expand").toggle(function(e){
 $("#submenu).slideUp("slow");
}, function(){
 $("#submenu").slideDown("slow");
})

jquery上滑菜单

3 个答案: