Question

我有一个dropdown菜单可以正常使用，但当我在dropdown菜单中添加链接时，该链接无法正常工作。

点击此处的小提琴，尝试点击link2和google链接; 它是google链接，不起作用。

HTML

<div class="menu">
    <div class="link">
        <a href="#">Link 1</a>
        <div class="dropdown">
            Content for dropdown 1
        </div>
    </div>
    <div class="link">
        <a href="#">Link 2</a>
        <div class="dropdown">
            <a href="http://google.com">Google</a>
        </div>
    </div>
</div>

JQUERY

$('.link a').on("click", function(e){
    e.preventDefault();
    $(this).parent('.link').siblings().children('.dropdown').fadeOut();
    $(this).siblings('.dropdown').fadeToggle();
});

 $(document).mouseup(function (e)
{
var container = $(".dropdown");

if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
{
    container.hide();
}
});

CSS

    .link {
    display: inline-block;
    position: relative;
    float: right;
}

.link a {
    padding: 10px;
}

.link .dropdown {
    display: none;
    position: absolute;
    top: 20px;
    right: 0px;
    color: white;
    background: #999;
    height: 200px;
    width: 200px;
    padding: 20px;
    border: 1px solid red;
}

http://jsfiddle.net/abLku7e1/2

知道如何解决这个问题吗？提前致谢

Answer 1

e.preventDefault();是问题所在，它位于.link a上，是所有 a .link的后代。使用.link > a作为父级链接。

>表示直接孩子。

Answer 2

试试这个：

$('.link > a').on("click", function(e){
    e.preventDefault();
    $(this).parent('.link').siblings().children('.dropdown').fadeOut();
    $(this).siblings('.dropdown').fadeToggle();
});

您只想定位.link的直接后代。

Answer 3

我有一个非常类似的问题。我的CSS菜单有类似的内容：

if random-float 1 > .4 [do something]

和你一样，我的javascript使用<ul> <li><a href="#internal link"> Working </a></li> <li><a href="http://external link"> Not working </a></li> </ul>关闭菜单一旦点击，对于外部链接，它会关闭菜单而不会实际转到外部链接。

我通过添加span来解决它：

e.preventDefault();

Answer 4

将JS代码更改为仅作用于第一个链接而不是所有子链接（如下所示）

    $('.link>a').on("click", function(e){
    e.preventDefault();
    $(this).parent('.link').siblings().children('.dropdown').fadeOut();
    $(this).siblings('.dropdown').fadeToggle();
});

$(document).mouseup(function (e)
{
    var container = $(".dropdown");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

注意链接＆gt;平均值只有第一级

http://jsfiddle.net/neka5u0d/

单击下拉菜单中的链接不起作用

4 个答案: