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");

您添加的课程appmenu-accent-selected不会出现在您的CSS中。
$(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/

CSS＆amp; jQuery没有正确更新？

1 个答案: