4

すべてのアイテムにサブメニューがあるメニューを作成しています。これはマークアップです：

<ul id="menu">
    <li>
        <a href="javascript:void(0)" onclick="show_submenu(this)">TITLE 1</a>
        <ul class="submenu">
            <li>
                <a href="javascript:void(0)">sub1</a>
            </li>
            <li>
                <a href="javascript:void(0)">sub2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0)">TITLE 2</a>
        <ul class="submenu">
            <li>
                <a href="javascript:void(0)">sub1</a>
            </li>
            <li>
                <a href="javascript:void(0)">sub2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0)">TITLE 3</a>
    </li>
    <li>
        <a href="javascript:void(0)">TITLE 4</a>
    </li>
</ul>

CSS

.submenu{display:none}

脚本

function show_submenu(that) {
    $('ul.submenu').slideUp();
    $(that).next('ul.submenu:first').slideDown();
}

私が抱えている問題は、アイテムをクリックするとサブメニューがスライドダウンすることですが、もう一度クリックすると、すでに開いているサブメニューがスライドアップしてスライドダウンします...一種の奇妙な効果ユーザーのために...それを修正する方法はありますか？

4

4 に答える 4

1

既存のサブメニューが既に表示されているかどうかを確認する必要があります。もしそうなら、あなたはそれを再び下にスライドさせたくありません.

var $submenu = $(that).next('ul.submenu:first'),
    viz = $submenu.is(":visible");
    $('ul.submenu').slideUp();
if (!viz) {
    $(that).next('ul.submenu:first').slideDown();
}

http://jsfiddle.net/ExplosionPIlls/zep6H/

于 2013-04-15T16:12:01.557 に答える
0

これは役立つはずです

function show_submenu(that){
if(!$(that).next('ul.submenu:first').is(":visible")){
        $('ul.submenu').slideUp();
        $(that).next('ul.submenu:first').slideDown();
}
    }
于 2013-04-15T16:15:39.467 に答える