Question

使用左侧引导菜单时我很困惑。我希望jQuery脚本在每次单击时添加/删除“活动”类，如果一个menuitem已经处于活动状态，它应该删除另一个项目上的“活动”类并将其添加到刚刚单击的类，就像普通菜单一样

现在我已经能够将所有项目分开，如果单击，则添加/删除该“活动”类。我试过使用.each（）方法，但我没有让它工作。我很感谢能得到的所有帮助。

                 $(document).ready(function(){
                        $(".menuitem1").click(function () {
                            var addressValue = $(this).attr("href");
                            if ( $( "#menuitem1" ).hasClass( "active" ) ) {

                                $( ".menuitem1" ).removeClass( "active" );
                            }
                                  else {
                                    $( ".menuitem1" ).addClass( "active" );
                                }
                            }
                        );

这是一个小提琴：http://jsfiddle.net/nRs72/

如您所见，所有元素都是分开的，并且不知道另一个元素是否处于活动状态。使用此当前代码，我需要对菜单中的所有元素执行此操作。谁知道我怎么能做得更好？

Answer 1

在这里，您不需要遍历每个循环。的 FIDDLE 即可。我在您的.left-menu

中添加了课程ul

<ul class="nav nav-pills nav-stacked left-menu">
</ul>

$('ul.left-menu li').on('click', function () {
    var isActive = $(this).hasClass('active');
    $('ul.left-menu li').removeClass('active');
    if (!isActive) {
        $(this).addClass('active');
    }
});

Answer 2

您通过将单击处理程序附加到每个菜单项来创建大量额外工作。 jQuery将返回与选择器匹配的所有元素的列表，因此这将允许您将事件附加到所有匹配的元素。（您将需要所有菜单项都有一个通用选择器，如'menuitem'类。）jQuery的.siblings方法将允许您使用'active'类获取.menuitem然后删除该类。

$(".menuitem").click(function () {
    var addressValue = $(this).attr("href");
    $(this).siblings('.active').removeClass('active');
    $(this).addClass('active');
});

Answer 3

将类更改为menuitem然后：

 $(document).ready(function(){
                        $(".menuitem").click(function () {

                            if ( $( this ).hasClass( "active" ) ) {
                                //do nothing
                            }
                            else {
                                 $( ".menuitem" ).each(function() {$(this.removeClass("active");});
                                 $(this).addClass( "active" );
                            }
                           }
                        );

每次点击链接的jQuery菜单

3 个答案: