3

jqueryを使用して、メニュー項目をクリックしてコンテンツを表示/非表示にするページを設定しています。いずれの場合も、他の div も非表示にします。次のコードは私には理にかなっているように見えますが、動作に一貫性がないため、何かが欠けていると思います。メニュー項目をクリックすると、期待どおりに動作する場合とそうでない場合があります。divが非表示の場合でもdivを非表示にすることと関係がありますか?

    $(document).ready(function() { 
    $('#commercial-menu-item').click(function() {
        $('#other').toggle();
        $('#intuito').hide();
        $('#pro-bono').hide();
        $('#all').hide();
    });
    $('#other-menu-item').click(function() {
        $('#other').toggle();
        $('#commercial').hide();
        $('#pro-bono').hide();
        $('#all').hide();
    });
    $('#pro-bono-menu-item').click(function() {
        $('#pro-bono').toggle();
        $('#other').hide();
        $('#commercial').hide();
        $('#all').hide();
    });
    $('#all-menu-item').click(function() {
        $('#all').toggle();
        $('#other').hide();
        $('#pro-bono').hide();
        $('#commercial').hide();
    });
});

これは私がjqueryで行った最初の実際のことなので、おそらく...

4

2 に答える 2

3

すべてのボタンに対して単一のクリック ハンドラーを作成し (共通のクラスを使用)、関連項目をオプションの data-... 属性から駆動する方がはるかに優れています。

次に、ロジックは「選択したアイテムを除くすべてを折りたたみ、選択したアイテムを切り替える」になります

JSFiddle はこちら: http://jsfiddle.net/dWQaL/

メニュー オプションは次のようになります。

<a id="pro-bono-menu-item" class="menu" data-item="#pro-bono">Pro bono</a>

data-item は単に関連する div などのセレクターです。メニュー項目の ID も不要になりました。

コードの例は次のようになります。

$(document).ready(function () {
    $('.menu').click(function () {
        var $clicked = $(this)
        $('.menu').each(function () {
            var $menu = $(this);
            if (!$menu.is($clicked)) {
                $($menu.attr('data-item')).hide();
            }
        });
        $($clicked.attr('data-item')).toggle();
    });
});

これにより、柔軟性が向上します。すべてのボタンのコードを変更することなく、新しいオプションを簡単に追加できます。

追加のボーナスは、クリックされた/クリックされていないアイテムのスタイルを設定できることです (たとえば、スタイルを切り替えることにより)。ここでも、すべてが 1 つの関数を通過するため、コードの重複はありません。

例: http://jsfiddle.net/dWQaL/1/

于 2013-09-25T16:03:11.917 に答える
-1

良いスタートですが、おそらく $('div').toggleClass('show'); を使用するでしょう。

次に、CSSを次のように記述できます

div {
    display:none;
}

div.show {
    display:block;
}

私はあなたの特定の解決策のためにjsfiddleを書き込もうとしますが、少しお願いします! それはそれをたくさんクリアするはずです！別の質問がある場合、または他に何か必要な場合はお知らせください:)

編集

これは、私があなたが持っていると思うものを実装するためのよりきちんとした方法の解決策です:)

$('ul li').each(function(){
    $(this).click(function(){
        $('div.show').toggleClass('show');
        target = '#'+$(this).data('target');
        $(target).toggleClass('show');
    });
});

http://jsfiddle.net/yKfaB/

于 2013-09-25T15:43:15.423 に答える