jquery - jquery 上滑菜单

Question

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

这是我的 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");
})