通过点击菜单来拒绝激活菜单

Question

在我的网站上，我有一个菜单，它具有某些功能和动画：

• 鼠标悬停时，除了悬停在上面的元素外，菜单中所有元素的不透明度都会发生变化
• 单击某个元素时，会通过保持其颜色并降低未单击元素的不透明度来对其进行标记
• 单击元素时，菜单向左移动(已解决(
• 单击元素时，滑块会淡入。(已解决(

现在所有这些功能都工作得很好，但问题是，它们都可以通过点击菜单周围和菜单上方来激活，而不仅仅是在元素上。是否可以通过单击菜单中的元素来激活所有功能(而不更改它们(？

JSFIDDLE：https://jsfiddle.net/atkumqpk/1/

菜单的html：

<div id="menu" class="menu">
    <ul class="headlines">
        <li id="item1">
            <button>aaaaaaaa</button>
        </li>
        <li id="item2">
            <button>bbbbbbb</button>
        </li>
        <li id="item3">
            <button>ccccccc</button>
        </li>
        <li id="item4">
            <button>dddddddd</button>
        </li>
        <li id="item5">
            <button>eeeeeee eee.</button>
        </li>
        <li id="item6">
            <button>ffffff</button>
        </li>
        <li id="item7">
            <button>ggggggg</button>
        </li>
    </ul>
</div>

Answer 1

在js中有一个函数：

$(".menu").on("click", function () {
    $(".menu").addClass('permahover');
});

将激活器更改为.menu button:

$(".menu button").on("click", function () {
    $(".menu").addClass('permahover');
});

更新

我建议花点时间阅读一下常见的CSS方法。同样适用于您对JQuery的使用。

请参阅更新的小提琴。做了一些更改，但长话短说，无论你在<li>标签上应用什么风格/动画/动作，都应该是针对他们的<button>孩子。

请仔细查看此处的css更改：

.headlines:hover li button, .headlines.active li button
.headlines button:hover, .headlines li button.active

Answer 2

这是一个不完美的解决方案，但只是一个开始。CSS在这里总体上可以处理得更好。你可以仔细检查一下。

.menu li {
position: relative;
/*top: 180px;
left: 0px;*/
}
.headlines li {
width:auto;margin-left: 0 !important
}

悬停实例和单击函数应该触发另一个div出现在"li块"或按钮本身上。