一页上有多个jquery下拉菜单

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

• 有人知道我可以使用的教程吗
• 什么是最好的方式来尝试和创造一个我自己？（我已准备好html和css）
• 我该如何做到只有一个下拉列表在单击时打开，而不是所有下拉列表或仅第一个下拉列表

这就是我到目前为止所做的：

PS：这也是我的第一次堆栈溢出，请告诉我我做错了什么：）

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

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>

​

演示

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>

---

​

您的下拉菜单具有相同的类

dl class=“dropdown”>

因此，当您这样做时，例如：

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

他们两个都有

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

<dl id="dropdown1">

---

然后更改jQuery。

您的下拉菜单得到了相同的类

dl class=“dropdown”>

因此，当您这样做时，例如：

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

他们两个都有

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

<dl id="dropdown1">

并相应地更改jQuery。

使用此命令并转换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();
 });

});​

使用此选项并转换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();
 });

});​

---

非常有用的答案，给了我更多的见解。我选择了上面的答案，因为它更容易实现。非常感谢！非常有用的答案，给了我更多的见解。我选择了上面的答案，因为它更容易实现。非常感谢！是的，我知道这是个问题，但我真的不知道如何解决它。谢谢你的回答！是的，我知道这是个问题，但我真的不知道如何解决它。谢谢你的回答！我还添加了这个$（document）.bind（'click'，function（e）{var$clicked=$（e.target）；if（！$clicked.parents（）.hasClass（“dropdown”））$（.dropdown dd ul”）.hide（）；}）；要使菜单在屏幕上任何地方单击后关闭，我还添加了$（document）.bind（'click'，function（e）{var$clicked=$（e.target）；if（！$clicked.parents（）.hasClass（“dropdown”））$（.dropdown dd ul”）.hide（）；}）；单击屏幕上的任意位置即可关闭菜单