Question

我有一个简单的下拉列表，我想用它作为语言选择器， HTML代码工作正常，但是当我添加下面的脚本时，href不再起作用了。鼠标悬停时，我可以看到链接，但点击不起作用!!!!

这是我的代码：

<body>
        <div class="container">



            <section class="main">
                <div class="wrapper-demo">
                    <div id="dd" class="wrapper-dropdown-2">
                        <span>Deutsch</span>
                        <ul class="dropdown">
                            <li><a href="http://www.bourax.com"><img src="./images/flags/flags_iso/32/de.png" >Deutsch</a></li>
                            <li><a href="#"><img src="./images/flags/flags_iso/32/en.png" >English</a></li>

                        </ul>
                    </div>
                </div>
            </section>

        </div>
        <!-- jQuery if needed -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <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>
    </body>

JSFiddle

Answer 1

这是由第一个单击处理程序中的return false;语句引起的。它可以防止事件执行它应该做的事情（就像使用jQuery时event.preventDefault();一样）。

尝试删除它，如下所示：

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

添加javascript后，href链接无效

1 个答案: