Question

被这一个难倒，我用jquery打开一个下拉菜单，我似乎无法点击框内的任何链接。

我认为preventDefault正在影响其中的所有内容，但我只希望它影响顶级。我对jquery不太满意，所以我无法弄清楚如何让它只选择其中的第一个以防止默认操作。

我只想在.toggle-nav本身上使用防止默认值。

JS：

// navbar toggle menu
$(".toggle-nav").on("click", function(event){
    event.preventDefault();
    if ($(this).children('.toggle-content').is(":visible"))
    {
      $(this).children('.toggle-content').hide();
    }
    else
    {
      $(".toggle-content").hide(); // hide any already open
      $(this).children('.toggle-content').show();
    }
});

菜单示例：

<div class="toggle-nav user-box hide-small">
    <a href="#"><img src="{:avatar}" alt="" width="49" height="49"> <span class="login-caret"><span class="caret-down"></span></span></a>
        <div class="toggle-content">
            <ul>
                <li><a href="test">Logout</a></li>
            </ul>
    </div>
</div>

示例CSS：

/* toggle menus */
.toggle-content {
    display: none;
    white-space: nowrap;
    position: absolute;
    right: 0;
    top: 49px;
    background: #222;
    box-shadow: 1px 1px 1px black;
    padding: 5px;
    word-wrap: normal;
    z-index: 999999;
}
.toggle-content ul {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: #999;
}
.toggle-content li {
    margin: 0;
    padding: 0;
}

更新

感谢您的帮助，这可以切换它们，并在您打开新的时关闭另一个：

// navbar toggle menu
$(".toggle-nav > a").on('click', function(event){
  event.preventDefault();

    var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
  if ($toggle.hasClass('toggle-active'))
  {
    $($toggle).removeClass('toggle-active');
  }
  else
  {
    $(".toggle-content").removeClass('toggle-active');
    $($toggle).addClass('toggle-active');
  }
});

将此添加到此CSS：

.toggle-active {
    display: block;
}

Answer 1

看起来它可能是＆＃34;被阻止的div＆＃34;问题。有时通过向元素或容器添加position: relative来解决，在这种情况下可能是.toggle-content或可能更具针对性（.toggle-content ul li a等）。其他人也建议设置一个高z值指数，尽管我还没有发现问题出现在我身上的必要条件。

不能使用preventDefault单击使用jquery打开的div内的链接

1 个答案: