-1

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

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

有任何想法吗？

4

2 回答 2

1

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

因此，为了防止您必须将点击事件添加到它自己的链接：

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

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

试试看，让我知道它是否有效:)

于 2012-02-25T15:23:43.820 回答
-1

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

于 2012-02-25T17:45:22.067 回答