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

サブメニューに独自のIDを指定して、次のように呼び出してみませんか。

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

Answer 3

無効な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/