CSS & jQuery没有正确更新吗？

Question

我正在尝试使用div创建一个菜单，但是由于某些原因，我无法达到我想要的效果。我想要更改悬停时菜单项的背景，但也要将菜单上的另一个div更改为另一个div。到目前为止，我可以让悬停和选择工作，但是一旦我选择了另一个元素，所选的元素就不会改变其样式，除非我首先将鼠标悬停在它上面。

我的JS：

$(document).ready(function () {

    $(".collapsebar").click(function () {
        $("#body").toggleClass("use-appmenu");
    });

    $(".appmenu-item").click(function () {
        $(".appmenu-accent-selected").removeClass("appmenu-accent-selected").addClass("appmenu-accent");
        $(this).find(".appmenu-accent").removeClass("appmenu-accent").addClass("appmenu-accent-selected");
    });

    $(".appmenu-item").hover(function () {
        $(this).addClass("appmenu-item-hover");
        $(this).find(".appmenu-accent").removeClass("appmenu-accent").addClass("appmenu-item-item1-accent");
    },
    function () {
        $(this).removeClass("appmenu-item-hover");
        $(this).find(".appmenu-item-item1-accent").removeClass("appmenu-item-item1-accent").addClass("appmenu-accent");
    });
});

我的HTML：

<div class="appmenu-item appmenu-item-item1">
    <div class="appmenu-accent float-left"></div>
    <div class="appmenu-text float-left">Item 1</div>
    <div style="clear: both;"></div>
</div>
<div class="appmenu-item appmenu-item-item2">
    <div class="appmenu-accent float-left"></div>
    <div class="appmenu-text float-left">Item 2</div>
    <div style="clear: both;"></div>
</div>
<div class="appmenu-item appmenu-item-item3">
    <div class="appmenu-accent float-left"></div>
    <div class="appmenu-text float-left">Item 3</div>
    <div style="clear: both;"></div>
</div>
<div class="appmenu-item appmenu-item-item4">
    <div class="appmenu-accent float-left"></div>
    <div class="appmenu-text float-left">Item 4</div>
    <div style="clear: both;"></div>
</div>
<div class="appmenu-item appmenu-item-item5">
    <div class="appmenu-accent float-left"></div>
    <div class="appmenu-text float-left">Item 5</div>
    <div style="clear: both;"></div>
</div>
<div class="appmenu-item appmenu-item-item6">
    <div class="appmenu-accent float-left"></div>
    <div class="appmenu-text float-left">Item 6</div>
    <div style="clear: both;"></div>
</div>

我的CSS：

.appmenu-item
{
    cursor: pointer;
}

div.appmenu-item-item1-accent
{
    width: 4px;
    height: 40px;
    background-color: #FF0000;
}

div.appmenu-accent
{
    width: 4px;
    height: 40px;
    background-color: #F26D47;
}

基本上，我有一个带有文本和颜色的矩形，当未选中或悬停在矩形上时，左侧的重音是灰色的，如果悬停在重音更改颜色上，而当选中时，该项目保持该颜色，当另一个项目被选中时，先前选择的项目只是灰色，而新项目具有颜色重音。我希望这是有意义的。任何帮助都将不胜感激。

谢谢!

Answer 1

单击处理程序中的这一行不起作用主要有两个原因：

$(this).find(".appmenu-accent").removeClass("appmenu-accent")
                               .addClass("appmenu-accent-selected");

1. 您添加的类appmenu-accent-selected没有出现在您的.hover()中，因此找不到任何元素，因为在您的appmenu-accent处理程序中，您实际上删除了appmenu-accent类(很明显，您正在单击的项就是您悬停在其上的项)。

因此，很明显，您可以通过将类添加到CSS来修复(1)点。我对固定点(2)的建议是永远不要删除appmenu-accent类，但要确保它出现在样式表中的appmenu-accent-selected和appmenu-item-item1-accent类之前，这样它的优先级就会低于它们。然后，您可以稍微简化代码：

$(".appmenu-item").click(function () {
    $(".appmenu-accent-selected").removeClass("appmenu-accent-selected");
    $(this).find(".appmenu-accent").addClass("appmenu-accent-selected");
});

$(".appmenu-item").hover(function () {
    $(this).addClass("appmenu-item-hover");
    $(this).find(".appmenu-accent").addClass("appmenu-item-item1-accent");
},
function () {
    $(this).removeClass("appmenu-item-hover");
    $(this).find(".appmenu-item-item1-accent").removeClass("appmenu-item-item1-accent");
});

演示：http://jsfiddle.net/NVa3d/1/