Question

我正在学习如何使用javascript而我正在尝试创建一个下拉菜单。不幸的是，当我点击下拉菜单时，没有任何反应，它也没有进入链接。

这是我的HTML：

<html>
    <body>
         <div class="wrapper-catego">
            <div id="dd" class="wrapper-dropdown-3" tabindex="1">
              <span>Categories</span>
                 <ul class="dropdown">
                    <li><a href=" url here ">Category 1</a></li>
                    <li><a href=" url here ">Category 2</a></li>
                    <li><a href=" url here ">Category 3</a></li>
                 </ul>
             </div>
         </div> 
    </body>
</html>

我的JavaScript是这样的：

              <script type="text/javascript">

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

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

                obj.opts.on('click',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).click(function() {
                // all dropdowns
                $('.wrapper-dropdown-3').removeClass('active');
            });

        });

    </script>

任何人都可以帮助我确定我在这里做错了吗？

Answer 1

您应该删除该功能结尾的return false;：

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

return false;等同于event.preventDefault（），它取消了事件的正常行为（此处为链接打开）。

修改：

好的，所以删除 return false; 是一个很好的解决方案，但由于文档上的onclick事件，下拉列表不会显示。此函数会自动删除类active。您必须检测单击鼠标的位置以删除活动类。我建议使用mouseup事件而不是click事件。

Demo

$(document).mouseup(function (e) { var dropdown = $(".wrapper-dropdown-3"); if (!dropdown.is(e.target) && dropdown.has(e.target).length === 0) { dropdown.removeClass('active'); } });

点击后，下拉菜单不会转到该链接

1 个答案: