Javascript JQuery菜单触发内容

我有一份菜单，上面有一大堆清单。我想做的是切换一个“highlight”类，用户点击该类时，该类的属性会发生变化

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

    .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);
});

。突出显示{背景：黑色；颜色：白色}


名字4


名字3


名称2


名字1


$（'momslist li a'）。单击（函数（）{
var parent=$（this.parent（）；
兄弟姐妹=父。兄弟姐妹（），
isOn=parent.toggleClass（'highlight'）.hasClass（'highlight'）；
toggleClass（'highlight'，！isOn）；
});

问题中的方法看起来像是大量的dom遍历，但最直接的解决方案可能是检查父级是否在单击时具有highlight类，如果是，则什么都不要做

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

});

---

这个问题中的方法看起来像是大量的dom遍历，但最直接的解决方案可能是检查父级是否在单击时具有highlight类，如果是，则不要做任何事情

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

});

---

问题是你自己！伊森-那将起到相反的作用-当你关掉那一个的时候，把所有的东西都打开

我认为你正在尝试的应该是：它确保所有东西都关闭了，只打开你感兴趣的东西

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

---

问题是你自己！伊森-那将起到相反的作用-当你关掉那一个的时候，把所有的东西都打开

我认为你正在尝试的应该是：它确保所有东西都关闭了，只打开你感兴趣的东西

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

---

这是可行的，但我是否应该监听li项目上的点击，而不是链接本身？我似乎有一个问题，当用户错过链接并直接点击li项时，它不会更改类属性。我们需要查看您的CSS以帮助实现这一点。也许链接到所有示例代码会有所帮助？哦，这是一个更直接的方法。通过与您的问题不同的方法进行回答。但是fwiw，我投票支持@SheldonGriffin的答案--无法获取链接到工作的名称。嗯。。。好的，我让它工作，目标切换只有当图像被点击，而不是链接。现在我的问题是，是否可以只针对与该列表项关联的特定标记文本，并仅在单击图像时更改其属性？当然，如果您愿意的话-尽管我倾向于完全删除段落，并将文本添加到图像后的链接标记中。假设您已连接到s，您只需将选择器更改为例如“momslist li p”，并且通常将parent（）更改为next（）。这可以工作，但我是否应该监听li项上的单击，而不是链接本身？我似乎有一个问题，当用户错过链接并直接点击li项时，它不会更改类属性。我们需要查看您的CSS以帮助实现这一点。也许链接到所有示例代码会有所帮助？哦，这是一个更直接的方法。通过与您的问题不同的方法进行回答。但是fwiw，我投票支持@SheldonGriffin的答案--无法获取链接到工作的名称。嗯。。。好的，我让它工作，目标切换只有当图像被点击，而不是链接。现在我的问题是，是否可以只针对与该列表项关联的特定标记文本，并仅在单击图像时更改其属性？当然，如果您愿意的话-尽管我倾向于完全删除段落，并将文本添加到图像后的链接标记中。假设您已连接到s，则只需将选择器更改为例如“momslist li p”，通常将parent（）更改为next（）。