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

Clicking on link inside dropdown menu doesn't work

本文关键字：链接 不起作用 下拉菜单 单击      更新时间：2023-09-26

我有一个dropdown菜单，它工作正常，但是当我在dropdown菜单中添加链接时，该链接不起作用。

检查此处的小提琴，并尝试单击链接2和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>

简讯

$('.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

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

e.preventDefault();是

问题所在，它.link a a 的所有 .link 的十进制者。对父级链接使用.link > a。

>的意思是直接的孩子。

试试这个：

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

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

我有一个非常相似的问题。 我的CSS菜单是这样的：

<ul>
  <li><a href="#internal link"> Working </a></li>
  <li><a href="http://external link"> Not working </a></li>
</ul>

像你一样，我的javascript使用e.preventDefault();单击后关闭菜单，对于外部链接，它将关闭菜单而不实际转到该外部链接。

我通过添加一个跨度来解决它： 

<ul>
  <li><a href="#internal link"> Working </a></li>
  <li> <span> <a href="http://external link"> </span> Now its working </a></li>
</ul>

将 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();
    }
});

注意链接>仅表示第一级

http://jsfiddle.net/neka5u0d/

相关文章：