Question

因此在尝试各种方法（如if语句和删除类）之后我终于放弃了。我想不出一个优雅的解决方案来修复我的代码。

当我点击其他列表项时，事件不会重置。相反，它以某种方式积累。这是怎么回事？

$(document).ready(function () {
$( ".home" ).click(function() {
$( this ).toggleClass( "item-active" );
$( ".block-1" ).toggleClass( "blocks" );
$( ".b1" ).toggleClass( "blockss" );
  $( ".content" ).toggleClass( "content-removed" );
});
$( ".products" ).click(function() {
$( this ).toggleClass( "item-active" );
$( ".block-2" ).toggleClass( "blocks" );
$( ".b2" ).toggleClass( "blockss" );
  $( ".content" ).toggleClass( "content-removed" );
});});

http://jsfiddle.net/bk38w/87/

我做了一个jsfiddle并将代码复制到那里。你可以在那里看到问题。

我很感激洞察力。

Answer 1

我清理了你的代码只使用一种方法，而不是为每个菜单分别设置类。清洁工html css js，也使用较少的课程。

说到css，你应该考虑下面这个。它曾经是.blockss，现在您只需更改.b1项的css，如果其父级有.blocks

DEMO

希望这会有所帮助，并且您了解它正在做什么。你实际上甚至可以更多地清理你的html，也就是说你可以移除<div class="b1">并在.b1上设置<a>类并将其设为display: block;但是那个＆＃39 ; s，如果你真的想要清理：）

.blocks .b1 {
    display:inline-block;
}

HTML

<nav>
    <ul>
        <li> <a href="#" class="trigger" data-id="home">Home</a>
        </li>
        <li> <a href="#" class="trigger" data-id="products">Products</a>
        </li>
    </ul>
    <div data-sub-id="home" class="block">
        <div class="b1"><a href="#">Link 1</a>
        </div>
        <div class="b1"><a href="#">Link 2</a>
        </div>
        <div class="b1"><a href="#">Link 3</a>
        </div>
    </div>
    <div data-sub-id="products" class="block">
        <div class="b1"><a href="#">Link 1</a>
        </div>
        <div class="b1"><a href="#">Link 2</a>
        </div>
        <div class="b1"><a href="#">Link 4</a>
        </div>
        <div class="b1"><a href="#">Link 5</a>
        </div>
    </div>
</nav>

JS

$(".trigger").click(function () {
    var $this = $(this),
        ul = $this.parents('ul'),
        dataId = $this.data('id'),
        subMenu = $this.parents('nav').find('[data-sub-id="' + dataId + '"]'),
        subMenus = $this.parents('nav').find('.block');

    //remove classes from all items
    ul.find('li a').each(function () {
        $(this).removeClass('item-active');
    });

    subMenus.each(function () {
        $(this).removeClass('blocks');       
    });

    //add classes to this item
    $this.addClass('item-active');
    subMenu.addClass('blocks');
});

Jquery单击事件（用于列表项）堆叠

1 个答案: