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 的可折叠菜单，其中 active 表示菜单项未折叠，即打开。

现在的问题是，能否优化 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

将一个公共类添加到公共主要元素，以便您可以将该单个类用作选择器。您还可以将事件合并到一个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 回答