Javascript 仅通过单击元素激活菜单

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

• 鼠标滚动时，菜单中所有元素的不透明度都会发生变化，但上面悬停的元素除外
• 单击某个元素时，会通过保持其颜色并降低未单击元素的不透明度来标记该元素

现在这些功能工作得很好，但是问题是，它们都可以通过在菜单及其上方单击/悬停来激活，而不仅仅是在元素上。 是否可以通过单击菜单中的某个元素来激活所有功能（不更改它们）

JSFIDDLE：

菜单的HTML：

<div id="menu" class="menu">
    <ul class="headlines">
        <li id="item1">
            <button>aaaaaaaa</button>
        </li>
        <li id="item2">
            <button>bbbbbbb</button>
        </li>
    </ul>
</div>

AAAAA


bbbbbbbb

只需尝试直接向按钮添加事件处理程序，而不是

元素：

$(window).load(function () {

...

function AddEventHandlers()
{
        var btns = $('button');  // all buttons (set and use id or class
                                 // if you've other buttons on this page)


        for (int i = 0;i < btns .length; i++) {
            btns[i].click(function() {
                // your logic here;
            });
        }; 
};

    AddEventHandlers();
...

});

$（窗口）。加载（函数（）{
...
函数AddEventHandlers（）
{
var btns=$（'button'）；//所有按钮（设置并使用id或类
//如果此页面上有其他按钮）
对于（int i=0；i

这是我的小提琴：

[https://jsfiddle.net/atkumqpk/23/][1]

这是因为在脚本和css中，所有事件（单击并悬停）都以li元素为目标。将css改为目标按钮。更改按钮的不透明度。为按钮而不是li提供：悬停样式。此外，您的li不需要指针光标，但按钮需要

检查此项，问题似乎出在css中：

.menu li {
    position: relative;
    top: 180px;
    left: 0px;
}

---

由于这个规则，您的li项被下移，但在css中悬停会触发.headlines（ul元素），它的位置仍然比它的子元素高180px，所以当鼠标高于菜单项时，您会改变不透明度。您的ul元素宽度为100%，其子元素的宽度相同（不包括边距），因此当鼠标位于菜单实际文本的左侧或右侧时，您的不透明度也会发生变化。

我还更新了您的小提琴：

---

我的解决方案是删除

元素的单击事件处理程序，并将其替换为按钮的单击和悬停事件：

只需要对css进行两个最小的更改

这种孤立（而不是依赖于.headlines:hover selector）的优点是，按钮之间可以有不同的大小和间距。用于触发悬停样式的区域始终是按钮区域，而不是周围的大小

---

到

---

瞧。

太多的代码，你应该只留下最重要的。@SergeyDenisov我同意，但不管留下与否，都不会对我面临的问题产生任何影响。我看不出

单击
有什么问题，只有CSS
：hover
<代码>单击
现在只能在
上工作，不是吗？@mikebrand，它不会解决问题，但我们更容易阅读您的代码。例如，您的
中只能包含2个
元素。将id添加到按钮标签而不是li如何？您尝试过吗？因为它被编辑了5次直到现在我还不明白。你的小提琴手的例子对我来说似乎很管用。那你打算怎么办？我以前试过，但是菜单向左移动的动画停止了。问题仍然存在，你只操纵了菜单的颜色。你解决了它，但是你改变了菜单的动画，你能让它与以前的动画一起工作吗？此表单中的菜单应向左移动/。。。而不是像这样|只是一个问题，如何确定您希望将过渡更多地扩展到左侧？在css中，您可以看到类似“transition:left 2.0s ease out”的属性，因此如果您希望一个元素比另一个元素移动到左侧更快，只需减少过渡时间。20小时后，您就可以获得奖励。完美的解决方案。。非常感谢。如果你有时间，请检查这个
// Removed Code

/*
var $li = $('.headlines li').click(function () {
    var state = !$(this).hasClass('active');
    $(this).parent().toggleClass('active', state);

    $li.removeClass('active');
    $(this).toggleClass('active', state);
});
*/

// Added Code

var $headlines = $('.headlines');
var $headlinesLi = $('.headlines li');


$('.headlines button').each(function() {        //iterate over every 'button' in '.headlines':

    var $thisButton = $(this);                  // save (cache) the current jQuery-Button-Object
    var $parentLi=$thisButton.parent();         // save (cache) the parent <LI>
    var state = false;                          // set initial button-state to false


    $thisButton.click(function(){               // click-handler for the current Button:

        state = !state;                         // invert 'state'
        $headlinesLi.removeClass('active');     // remove .active-class on every <LI>
        $parentLi.toggleClass('active',state);  // set/remove .active-class on buttons parent <LI> as indicated by 'state'
        $headlines.toggleClass('active',state); // set/remove .active-class on .headlines indicated by 'state'

    });

    $thisButton.hover(                          //hover-handler for the current Button:

        function () {                           // routines for mouse-enter like events:
            $parentLi.addClass('hover');        // add .hover-class to buttons parent <LI>
            $headlines.addClass('hover');       // add .hover-class to .headlines
        },

        function () {                           // routines for mouse-leave like events:
            $parentLi.removeClass('hover');     // remove .hover-class to buttons parent <LI>
            $headlines.removeClass('hover');    // remove .hover-class to .headlines
        }

    );
});

.headlines:hover li, .headlines.active li {
/* PARENT HOVER */
...

.headlines li:hover, .headlines li.active {
/* SINGLE HOVER */
...

.headlines.hover li, .headlines.active li {
/* PARENT HOVER */
...

.headlines li.hover, .headlines li.active {
/* SINGLE HOVER */
...