CSS和jQuery無法正確更新？

Question

我正在嘗試使用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類不會出現在CSS中。
2. $(this).find(".appmenu-accent")找不到任何元素，因為在您的.hover()處理程序中，您實際上刪除了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/