Javascript jQuery每个函数在每次单击时显示不同的弹出窗口

嗨，我正试图让它为每个循环显示一个单独的框，但我不知道如何使每个循环正常工作…此代码同时显示每个循环，而不是单个框…感谢您的帮助

<style type="text/css">
.div_ActionsList {
    border:1px solid #ccc;
    min-width:100px;
    max-width:200px;
    position:relative;
    top:5px;
}
.div_actionsClick {
    cursor:pointer;
    font-size:14px;
}
.div_ActionsList ul {
    line-height:18px;

}
.div_ActionsList ul li{
    line-height:18px;
    font-size:14px;
    padding:3px 8px;
}

.div_ActionsList ul li:hover {
    background:#0CF;
    cursor:pointer;
    color:#fff;
}
</style>

<script type="text/javascript">
$(function() {

    $('.div_ActionsList').hide();

    $('.div_actionsClick').each(function(){
        $(this).click(function(){
            $('.div_ActionsList').toggle();
        });
    });
});
</script>

<div class="div_Actions">
    <div class="div_actionsClick">Actions</div>
    <div class="clearBoth"></div>
    <div class="div_ActionsList">
        <br/>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
        <br/>
    </div>
    <br/><br/>
    <div class="div_actionsClick">Actions</div>
    <div class="clearBoth"></div>
    <div class="div_ActionsList">
        <br/>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
        <br/>
    </div>
    <br/><br/>
</div>

.分区行动列表{
边框：1px实心#ccc；
最小宽度：100px；
最大宽度：200px；
位置：相对位置；
顶部：5px；
}
.div_actions单击{
光标：指针；
字体大小：14px；
}
.div_行动列表ul{
线高：18px；
}
.div_Actions List ul li{
线高：18px；
字体大小：14px；
填充：3px8px；
}
.div_actions列表ul li:悬停{
背景：0立方英尺；
光标：指针；
颜色：#fff；
}
$（函数（）{
$（'.div_ActionsList'）.hide（）；
$（'.div_actionsClick'）。每个（函数（）{
$（此）。单击（函数（）{
$（'.div_ActionsList'）.toggle（）；
});
});
});
行动



列表项
列表项
列表项
列表项
列表项






行动



列表项
列表项
列表项
列表项
列表项

在另一个div中对每个

进行包装，单击

/

列表

对，然后尝试此修改（请注意，每个都不需要，jQuery仍将绑定到所有匹配的元素）：

应该是：

$('.div_actionsClick').click(function(){
    $(this).parent().find('.div_ActionsList').toggle();
});

基本上，您所遇到的错误是因为

$（'.divActionsList'）

正在查看整个页面，并用类切换所有div（它们都是）。通过使用div对

单击

和

列表

进行分组，jQuery可以通过检查单击按钮附近的DOM轻松找到相应的列表

---

基本上，上面所做的只是找到被单击的元素的父元素，然后在该元素中查找所有

.div\u actions列表

，而不是在整个页面中。

在另一个div中包装每个

单击

/

列表

对，然后尝试此修改（请注意，不需要使用each，jQuery仍将绑定到所有匹配的元素）：

应该是：

$('.div_actionsClick').click(function(){
    $(this).parent().find('.div_ActionsList').toggle();
});

基本上，您所遇到的错误是因为

$（'.divActionsList'）

正在查看整个页面，并用类切换所有div（它们都是）。通过使用div对

单击

和

列表

进行分组，可以使jQuery通过检查单击按钮附近的DOM轻松找到相应的列表

---

基本上，上面所做的只是找到被单击元素的父元素，然后查找其中的所有

。div\u actions list

，而不是整个页面。

有几个问题。首先，您可以通过执行以下操作将单击绑定到一个div：

$('.classname').click(function(){
//function
});

然后，您可以通过执行以下操作进行切换

$(this).parent().find('.div_ActionsList').toggle();

因此，您的最终代码是：

$('.div_actionsClick').click(function(){
      $(this).parent().find('.div_ActionsList').toggle();
});

---

有几个问题。首先，您可以通过执行以下操作将click绑定到一个div：

$('.classname').click(function(){
//function
});

然后，您可以通过执行以下操作进行切换

$(this).parent().find('.div_ActionsList').toggle();

因此，您的最终代码是：

$('.div_actionsClick').click(function(){
      $(this).parent().find('.div_ActionsList').toggle();
});

---

对于给定的HTML，由于完全相同的原因，此操作仍然失败。对于给定的HTML，由于完全相同的原因，此操作仍然失败。太棒了，Matt。如果我们一次只想打开一个？即…单击一个时关闭另一个？再次感谢！@webwrks:

$（'.div_ActionsList'）.hide（）

就像启动时一样，将隐藏所有内容，然后显示一个相关项。

$（'.div_ActionsList'）.hide（）；$（'.div_actionslick'）.each（function（）{$（this）.click（function（）{$（this）.parent（）.find（'.div_ActionsList'）.toggle（）；}）

嘿，我无法让它工作，因为使用单击功能将它放在那里不能使它正常工作…你建议将它放在哪里？Thx！如果你还没有，你还需要对我概述的HTML进行更改。太棒了，Matt。如果我们一次只想打开一个？即…当一个是c时关闭另一个单击？再次感谢！@webwrks:

$（'.div_ActionsList'）.hide（）；

就像启动时一样，将隐藏所有内容，然后显示一个相关项。

$（'.div_ActionsList'）.hide（）；$（'.div_ActionsList'）。每个（函数（）{$（this）。单击（函数（）{$（this.parent（）。查找（'.div_ActionsList'）.toggle（））；）

嘿，我无法让它工作，因为使用单击功能将它放在那里不能使它正常工作…您建议将它放在哪里？Thx！如果您还没有，您还需要对我概述的HTML进行更改。