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. 您添加不會出現在你的CSS類appmenu-accent-selected。
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/