0

我正在尝试使用 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;
}

Essentially I have a rectangle with text and a color accent on the left when not selected or hovered on the rectangle is just grey if hovered on the accent changes color and when selected that item stays accented with that color when another item is selected the previously selected项目只是灰色，新项目有颜色口音。我希望这是有道理的。任何帮助将不胜感激。

谢谢你！

4

1 回答 1

1

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

$(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/

于 2012-09-13T02:22:22.497 回答