Question

我有一个css菜单，但是当我尝试从菜单中加载网址时，例如google中的网址。它只更改占位符的名称，不加载页面。知道怎么改变这个吗？

感谢您的帮助！

小提琴示例，尝试在菜单中加载谷歌：http://jsfiddle.net/n877s/3/

            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');
            });

        });

HTML

<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
    <span>Transport</span>
        <ul class="dropdown">
        <li><a href="#">Classic mail</a></li>
        <li><a href="#">UPS Delivery</a></li>
        <li><a href="http://www.google.com">Google</a></li>
        </ul>
</div>

Answer 1

您的<a>标记是<div id="dd">的后代，并且该div有一个click处理程序，它返回false并禁止默认点击操作。点击事件在a标记上生成，并冒泡到div，这会阻止它。

使其成功的一种方法是添加：

if ($(event.target).is("a[href!=#]"))
    return true;

位于return false;行

之上

Answer 2

您正在阻止链接的标准行为（甚至是后代链接）：

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

添加以下代码以防止点击菜单项冒泡到上述处理程序：

        obj.dd.find('a').on('click',function(event){
            event.stopPropagation();
        });

这是一个working fiddle。

注意：检查控制台以查看结果，因为jsfiddle不会在其iframe（SAMEORIGIN政策）中加载google.com。

Answer 3

方法＃1：最简单的方法是从obj.dd的点击事件中删除return false;并在其开头添加event.stopPropagation();，然后只提供链接href属性a价值，他们将加载该页面。像这样：

obj.dd.on('click', function(event){
    event.stopPropagation();

    $(this).toggleClass('active');
});

方法＃2：或者你可以试试：

obj.opts.on('click',function(e){
    e.preventDefault();

    var opt = $(this);
    obj.val = opt.text();
    obj.index = opt.index();
    obj.placeholder.text(obj.val);

    window.location.href = opt.attr('href');
});

在HTML中，添加类似于您拥有的Google链接的链接。

使CSS菜单项加载网站而不是使用javascript更改占位符

3 个答案: