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

Question

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

• 鼠标悬停时，菜单上所有元素的不透明度都会发生变化，除了上面悬停的元素。
• 单击某个元素时，通过保留其颜色并减少未单击元素的不透明度来对其进行标记。

现在这些功能运行良好，但是问题在于，可以通过单击/将鼠标悬停在菜单及其上方，而不只是在元素上，将其全部激活。 是否可以将其固定为仅单击菜单中的一个元素即可激活所有功能（无需更改它们）？

JSFIDDLE： https ：//jsfiddle.net/atkumqpk/16/

菜单的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>

Answer 1

只需尝试将事件处理程序直接添加到按钮上，而不添加<li>元素：

$(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();
...

});

Answer 2

检查这个小提琴 ，看起来问题出在您的CSS中：

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

由于此规则，您的li项已下移，但在.headlines（ul元素）上触发的css悬停，该位置比其子元素高180px，因此，当鼠标高于菜单项时，您将更改不透明度。 并且您的ul元素宽度为100％，其子li元素宽度相同（不包括边距），因此当鼠标从菜单的实际文本的左侧或右侧移动时，您的不透明度也会发生变化。

Answer 3

我还对您的小提琴进行了更新：

更新的小提琴

---

我的解决方案是删除<LI>元素的点击事件处理程序，并用按钮的点击和悬停事件替换它：

只需对CSS进行两个最小的更改。

这种隔离的优势（而不是依靠.headlines：hover-selector）是您的按钮之间可以具有不同的大小和间距。 用于触发悬停样式的区域将始终是按钮区域，而不是周围<li>的大小

---

// 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
        }

    );
});

这种添加和删除.hover上类.headlines和你的按钮父<li>元素。

---

在CSS中，您只需要从选择限定符中的:hover伪选择器切换到.hover类。

所以从：

.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 */
...

瞧

Answer 4

这是过分的小提琴：

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

这是因为您要将脚本和css中所有事件（单击和悬停）的li元素作为目标。 将您的css更改为target按钮。 更改按钮的不透明度。 给按钮设置：hover样式，不要给li。 另外，您的li不需要指针光标，但按钮则需要。