0

アコーディオンとトグル効果のあるjqueryメニューがあります。しかし、それはバグで動作します：時々それはすべての要素を閉じます。

あなたはそれを最善にするのを手伝ってもらえますか？

HTML：

<ul id="accordion">
    <li>
        <a href="#">Level 1</a>
        <ul>
            <li><a href="#">11</a></li>
            <li><a href="#">12</a></li>
        </ul>
    </li> 
     <li>
        <a href="#">Level 2</a>
        <ul style="display: none;">
            <li><a href="#">21</a></li>
            <li><a href="#">22</a></li>
        </ul>
    </li> 
</ul>

JS：

var sel = '#accordion'
$(sel + ' li a').toggle(
        function() {
            var checkElement = $(this).next();
            if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                return false;
            }
            if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $(sel + ' ul:visible').slideUp('normal').removeClass('selected');
                checkElement.addClass('selected').slideDown('normal', function() {

                });
                return false;
            }
        },
        function() {
            $(sel + ' ul:visible').removeClass('selected').slideUp('normal', function() {

            });
        }
    );​

デモ：http：//jsfiddle.net/uG6zB/11/

4

1 に答える 1

1

私はあなたのコードを調べましたが、私が理解しているように、トグルがあなたがやろうとしていることに最適な機能であるかどうかはわかりません。

私はに変更toggleしclick、あなたのロジックを少し変更しました。

javascriptは次のようになります。

var sel = '#accordion'
$(sel + ' li a').click( function(){
    var checkElement = $(this).next();
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        checkElement.slideUp('normal').removeClass('selected');
    }
    else if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $(sel + ' ul:visible').slideUp('normal').removeClass('selected');
        checkElement.addClass('selected').slideDown('normal', function() {

        });
    }
});

このJavaScriptを使用すると、風変わりな動作をすることなく、メニューを上下させることができました。 フィドル

于 2012-12-26T17:05:59.763 に答える