javascript - 使 JS 菜单显示在悬停而不是单击时

Question

我从这里得到了下拉菜单 3：http: //tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

在点击时工作得很好，但我不知道如何让它在悬停时工作。

我对 JS 的尝试：

<script type="text/javascript">

        function DropDown(el) {
            this.dd = el;
            this.placeholder = this.dd.children('span');
            this.opts = this.dd.find('ul.dropdown > a');
            this.val = '';
            this.index = -1;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents : function() {
                var obj = this;

                obj.dd.on('hover', function(event){
                    $(this).toggleClass('active');
                    return false;
                });

                obj.opts.on('hover',function(){
                    var opt = $(this);
                    obj.val = opt.text();
                    obj.index = opt.index();
                    obj.placeholder.text(obj.val);
                });
            },
            getValue : function() {
                return this.val;
            },
            getIndex : function() {
                return this.index;
            }
        }

        $(function() {

            var dd = new DropDown( $('#dd') );

            $(document).hover(function() {
                // all dropdowns
                $('.wrapper-dropdown-3').removeClass('active');
            });

        });

    </script>

Answer 1

我认为这应该有效：

 $(function() {

        var dd = new DropDown( $('#dd') );

        $('.wrapper-dropdown-3').hover(function() {
            $(this).toggleClass('active');
        });

    });

如果有任何问题，请说出来。

Answer 2

尝试：

            obj.dd.on('mouseenter', function(event){
                $(this).toggleClass('active');
                return false;
            });

            obj.opts.on('mouseleave',function(){
                var opt = $(this);
                obj.val = opt.text();
                obj.index = opt.index();
                obj.placeholder.text(obj.val);
            });

Answer 3

如果我没记错的话， hover() 函数会查找 mouseover 和 mouseoff 事件。为什么您希望仅在鼠标悬停在顶部的项目上时才更改菜单？一旦你鼠标关闭它就会改变。我建议只使用鼠标悬停，然后使用鼠标离开而不是悬停。