0

HTMLの例（わかりやすくするため）：

<nav>
    <ul>
        <li class="top-navbar-channels">
            <a href="#"></a>
            <div class="dropdown-menu">BLAH, BLAH, BLAH!</div>
        </li>

        <li class="top-navbar-about">
            <a href="#"></a>
            <div class="dropdown-menu-about">BLAH, BLAH, BLAH!</div>
        </li>

        <li class="top-navbar-search">
            <a href="#"></a>
            <div class="dropdown-menu-search">BLAH, BLAH, BLAH!</div>
        </li>
    </ul>
</nav>

jQueryコードの例：

jQuery(document).ready(function($){

    $('.dropdown-menu').on('show', function () {
        $('.top-navbar-channels > a').addClass('selected');
    });
    $('.dropdown-menu').on('hide', function () {
        $('.top-navbar-channels > a').removeClass('selected');
    });

    $('.dropdown-menu-about').on('show', function () {
        $('.top-navbar-about > a').addClass('selected');
    });
    $('.dropdown-menu-about').on('hide', function () {
        $('.top-navbar-about > a').removeClass('selected');
    });

    $('.dropdown-menu-search').on('show', function () {
        $('.top-navbar-search > a').addClass('selected');
    });
    $('.dropdown-menu-search').on('hide', function () {
        $('.top-navbar-search > a').removeClass('selected');
    });

});

興味がある人のために...jQueryコードはselected、アクティブなメニュー項目のリンクに新しいクラスを追加します。私の場合、それはTwitter Bootstrapベースの折りたたみ可能なメニューです。アクティブとは、メニュー項目が折りたたまれていない、つまり開いていることを意味します。

さて、問題は、jQueryコードを最適化できるか（つまり、同じ機能をより少ないコードで）できるかということです。もしそうなら、どのように？

4

3 に答える 3

2

おそらく、このコード：

jQuery(document).ready(function($){
    var $menus = $('.dropdown-menu, .dropdown-menu-search, .dropdown-menu-about');

    $menus.on('show', function () {
        $(this).siblings("a").addClass('selected'); // or alternatively, $(this).prev("a")
    });
    $menus.on('hide', function () {
        $(this).siblings("a").removeClass('selected'); // idem as above
    });
});
于 2012-12-16T15:42:34.100 に答える
2

共通のメイン要素に共通のクラスを追加して、その単一のクラスをセレクターとして使用できるようにします。イベントを 1 つのon()呼び出しに結合toggleClass()して、リンクで使用することもできます。on()スペースで区切られた複数のイベントが可能

例

<div class="dropdown-menu menu_content">

次に、jQuery の場合:

$('.menu_content').on('show hide', function () {
        $(this).siblings("a").toggleClass('selected'); 
});
于 2012-12-16T16:05:11.757 に答える
-1

これはマティアスより少し短いです...それほど短くはありません

$(function(){
  $('.dropdown-menu, .dropdown-menu-search, .dropdown-menu-about').on('show',function(){
    $(this).siblings('a').addClass('selected');
  }).on('hide',function(){
    $(this).siblings('a').removeClass('selected');
  });
});
于 2012-12-16T15:43:28.137 に答える