Question

我有一个带有一堆列表项的菜单。我要做的是切换一个“突出显示”类，用户点击它将改变其属性。

现在我遇到的问题是，当用户点击其中一个并使其成为活动状态时，当他/她再次点击活动状态时，它会恢复到其原始状态，但会将所有其他列表项更改为“突出“类属性。我想这样做它不会改变活动的属性并且不会改变其他列表项，除非他们当然想要点击其他列表项然后先前活动的一个恢复并且新的更改。代码如下。

    .highlight { background:black; color:white }

<ul id="momslist">
    <li><a href="#"><img src="#" alt=""/></a>
    <p>Name 4</p></li>
    <li><a href="#"><img src="#" alt=""/></a>
    <p>Name 3</p></li>
    <li><a href="#"><img src="#" alt=""/></a>
    <p>Name 2</p></li>
    <li><a href="#"><img src="#" alt=""/></a>
    <p>Name 1</p></li>
</ul>


$('#momslist li a').click(function() {
    var parent = $(this).parent();
    siblings = parent.siblings(),
    isOn = parent.toggleClass('highlight').hasClass('highlight');

    siblings.toggleClass('highlight', !isOn);
});

Answer 1

问题是你的！isOn - 这样做会发生相反的事情 - 即当你把它关闭时打开所有东西。

以下内容适用于我认为您正在尝试的内容：它会确保所有内容都关闭并打开您感兴趣的内容。

$('#momslist li a').click(function() {
    $('#momslist li').removeClass('highlight');
    $(this).parent().addClass('highlight');
});

如果您对“点击一次打开/再次点击关闭”感兴趣，以下将会这样做

$('#momslist li a').click(function() {
    var parent = $(this).parent();
    if (parent.hasClass('highlight')) {
        parent.removeClass('highlight');
    } else {
        $('#momslist li').removeClass('highlight');
        parent.addClass('highlight');
    }
});

Answer 2

问题中的方法似乎是很多dom遍历，但也许最直接的解决方案是检查父母是否在点击上有突出显示类，如果是 - 不要做任何事情。

$('#momslist li a').click(function() {

    var parent = $(this).parent();

    if (parent.hasClass('highlight')) {return false;}//bail if highlighted

    siblings = parent.siblings(),
    isOn = parent.toggleClass('highlight').hasClass('highlight');
    siblings.toggleClass('highlight', !isOn);

});

JQuery菜单触发内容

2 个答案: