为什么我的滑动切换不起作用？

StackOverflow https://stackoverflow.com/questions/9445233

  •  12-11-2019
  •  | 
  •  

题

我有一个导航栏，我希望导航栏中的其中一个项目在单击时打开一个下拉菜单。我有这个：

$("#dropdown_menuitem").click(function() {
    $(this).find('ul').slideToggle('slow');
});

然而，点击时下拉菜单永远不会出现，我的 html 看起来像这样：

<li id="dropdown_menuitem"><a href="#">MyAxon<img style="padding-left:5px;" src="img/drop-down.png"/></a>
    <ul class="dropdown reverse_gradient">
         <li class="dropdown"><a href="#">Teachers</a></li>
         <li class="lastElementInDropDown dropdown"><a href="#">Students</a></li>
    </ul>
</li>
.
.

编辑：我试过 alert($(this).find('ul').html()); 我收到了两个警报 <li> 元素。

$(this).find('ul').show(200); 也没用

内容不是动态添加的。

我的 CSS 看起来像这样：

 nav.main_nav ul.dropdown{
     opacity: 0; 
     position: absolute; 
     top: 35px; 
     left: 10px;  
     border-bottom-right-radius: 10px; 
     -moz-border-bottom-right-radius: 10px;
     border-bottom-left-radius: 10px; 
     -moz-border-bottom-left-radius: 10px;
     display: none;
     z-index: 100;
  }

有任何想法吗？

有帮助吗？

解决方案 2

发现了问题，我在我的样式表中将透明度设置为零，这阻止了我看到下拉菜单。

其他提示

首先，您必须确保您单击的不是链接本身。在这里，您甚至对 li 执行了 .click - 但如果用户实际上单击了该链接怎么办？那么它们将被重定向到链接中的 href。

因此，为了防止您必须向链接本身添加点击事件：

$("#dropdown_menuitem a").click(function(e) {
    if($(this).parent().find('ul').length > 0) {
         e.preventDefault():;
    }
});

这将检查当前 li 中是否存在下拉菜单 - 如果存在，我们不会让它重定向用户来中断我们的 JavaScript 执行。所以我们要做的就是阻止当前事件的发生。比如重定向。

尝试一下，让我知道它是否有效:)

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top