Question

我设法让<ul>只使用几行vanilla JavaScript代码来打开和关闭显示，但我遇到了一个问题。

我给<li>打开/关闭了:hover值（在这种情况下为灰色）。我在<li>上保持相同的颜色，因为<ul>已折叠。关闭<ul>显示后，我将其返回到之前的值，但:hover值不再有效。任何解决方案吗？

这是我的JavaScript：

function expandIt(obj) {
    obj.nextSibling.style.display = "block";
    obj.style.backgroundColor = "gray";};

function reduceIt(obj) {
    obj.style.display = "none";
    obj.previousSibling.style.backgroundColor = "white";};

这是HTML：

<ul>
    <li onclick="expandIt(this)">ITEM</li>
        <ul onclick="reduceIt(this)">
            <li>subitem</li>
        </ul>
</ul>

Answer 1

悬停与内联样式

解决方案是添加或删除具有所需样式的类名。由于css特异性，直接放在style中的任何内容都将优先于css悬停定义中定义的规则。结果是你的悬停永远不会记录背景颜色的变化。

兄弟姐妹的问题

您的代码的另一个问题是nextSibling和previousSibling将检查 text 节点以及元素。这样做的目的是确保您查看实际元素而不是文本节点。

这种方法会确保您最终得到一个元素（.nodeType == 1）

function expandIt(obj) {
 var next = obj.nextSibling;
 while(next && next.nodeType != 1)next = next.nextSibling;
 next.style.display = "block";
 obj.style.backgroundColor = "gray";
};

function reduceIt(obj) {
 obj.style.display = "none";
 var prev = obj.previousSibling;
 while(prev && prev.nodeType != 1)prev = prev.previousSibling;
 prev.style.backgroundColor = "white";
};

以下是该概念的演示：http://jsfiddle.net/Yu97H/

现在，即使使用该工作示例，也可以单击以将灰色设置为背景，但悬停已断开。像ul li:hover { background-color: blue; }这样的简单规则会表现出这种行为。

以下是该行为的演示：http://jsfiddle.net/Yu97H/1/

Answer 2

你可以使用你的css中的！important修饰符。像这样：

ul li:hover {
   background-color:#ccc !important;
}

这会覆盖内联样式

：在backgroundColor更改</li>之后悬停不在<li>上工作

2 个答案: