Question

我有一个禁止栏，我想要点击导航栏中的一个项目打开一个下拉菜单。我有这个：

$("#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;
  }

有什么想法吗？

Answer 1

首先，您必须确保点击的内容不是链接本身。在这里你甚至可以点击一下。但是如果用户实际点击链接怎么办？那么他们将被重定向到链接中的href。

因此，为了防止您必须在链接中添加点击事件：

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

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

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

Answer 2

发现问题，我在样式表中将不透明度设置为零，这使我无法看到下拉菜单。

为什么我的幻灯片切换不起作用？

2 个答案: