javascript - 拒绝通过在菜单周围单击来激活菜单

Question

在我的网站上，我有一个具有特定功能和动画的菜单:

• 鼠标悬停时，菜单的所有元素的不透明度都会发生变化，悬停在上方的元素除外。
• 当点击一个元素时，它通过保持其颜色并降低未点击元素的不透明度来标记。
• 单击元素时菜单向左移动(已解决)
• 当点击一个元素时， slider 会淡入。 (已解决)

现在所有这些功能都运行良好，但问题是它们都可以通过单击菜单周围及其上方来激活，而不仅仅是在元素上。是否可以修复它，以便只需单击菜单中的一个元素即可激活所有功能(无需更改)？

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 的使用。

查看更新 fiddle .进行了一些更改，但长话短说，无论您将某些样式/动画/ Action 应用于 <li>标签，这应该是他们的 <button> children 。

在此处仔细查看 css 更改:

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