jQuery菜单触发内容

Question

I have a menu with a bunch of list items. What I am trying to do is toggle a "highlight" class for which ever one the use clicks on it will change its properties.

Now the problem I am having is when the user clicks on one and makes it the active one when he/she clicks on the active one again it reverts back to its original state but changes all of the other list items to the "highlight" class properties. I would like to make it so that it doesnt change the properties of the active one already and doesnt change the other list items either unless of course they want to click on the other list item then that previous active one reverts back and the new one changes. Code below.

    .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

The problem is your !isOn - that's going to do the opposite - ie turn everything on when you turn that one off.

The following should work for what I think you're attempting: it makes sure that everything is turned off and turns on just the one you're interested in.

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

If you're interested in the "click once to turn on/click again to turn off", the following will do that

$('#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

The approach in the question seems like a lot of dom traversal, but perhaps the most direct solution would be to check to see if the parent has the highlight class on click, if so - don't do anything.

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

});