Question

示例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-based collapsible menu，在有效的情况下，菜单项不会折叠，即打开。

现在，问题是，是否可以优化jQuery代码（即使用更少代码的相同功能）？如果是这样，怎么样？

Answer 1

也许，这段代码：

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
    });
});

Answer 2

将公共类添加到公共主元素，以便可以将该单个类用作选择器。您还可以将这些事件合并为一个on()来电并在链接上使用toggleClass()。 on()允许多个空格分隔的事件

实施例

<div class="dropdown-menu menu_content">

然后是jQuery：

$('.menu_content').on('show hide', function () {
        $(this).siblings("a").toggleClass('selected'); 
});

Answer 3

这比Matthias短一点......不是很短

$(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');
  });
});

如何优化jQuery代码以添加类（到不同的元素）？

3 个答案: