一页上有多个 jquery 下拉菜单

Question

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

• 有谁知道我可以为此使用的教程吗？
• 尝试自己创建一个的最佳方法是什么？ （我已准备好 html 和 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();
});

它对它们都执行此操作！

您可能想识别您点击的是哪一个。例如，您可以为下拉菜单提供一个 id

<dl id="dropdown1">

，然后更改您的 jQuery。