Question

我是jquery的新手，我正在尝试制作一个下拉菜单列表，如www.teefury.com（男士和女士尺寸）。我来得非常接近，但当我点击其中的一个按钮时，所有这些按钮都打开了（或者在我第二次尝试时只打开第一个按钮）。因此我的问题是：

有没有人知道我可以使用的教程？
尝试自己创建一个的最佳方法是什么？（我已准备好html＆amp; css）
如何制作，所以只有一个下拉列表会在点击时打开，而不是全部或只有第一个？

这就是我到目前为止：http://users.telenet.be/ezarto/dropdown/

PS：这也是我的第一个stackoverflow，请告诉我我做错了什么：）

PSS：只允许1个超链接，抱歉，但您必须复制/粘贴teefury

Answer 1

使用 this 并遍历DOM以找到您要显示的相应列表。我重构了你的JavaScript。

$(function() {

 $(".dropdown dt a").click(function() {
   $(this).closest('dt').siblings('dd').find('ul').toggle();
 });

 $(".dropdown dd ul li a").click(function() {
   var text = $(this).text();

   $(this).closest('dd').siblings('dt').find('span').text(text);

   $(this).closest('ul').hide();
 });

});

Answer 2

<强>演示

http://jsfiddle.net/QznH7/

<强> CSS

.invisible
{
    display:none;
}

<强> HTML

<dl>
        <dt><a class='showMenu' href="javascript:"><span>1</span></a></dt>
        <dd>
            <ul class="invisible">
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
            </ul>
        </dd>
</dl>

<dl>
        <dt><a class='showMenu' href="javascript:"><span>2</span></a></dt>
        <dd>
            <ul class="invisible">
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
            </ul>
        </dd>
    </dl>

<强>的javascript

jQuery(function(){
    jQuery('.showMenu').bind('click',function(e){
        jQuery(e.target).parents('dl:first').find('ul').toggleClass('invisible')
    });   
});

Answer 3

您的下拉菜单获得了同一个班级dl class="dropdown">

所以当你这样做时：

$(".dropdown dt a").click(function() {
  $(".dropdown dd ul").toggle();
});

它们都在它们身上做到了！

您可能想要识别您点击的是哪一个。例如，您可以为您提供下拉列表

<dl id="dropdown1">

并改变你的jQuery。

1页上有多个jquery下拉菜单

3 个答案: