Question

您好我想让它为每一个显示一个单独的框，我无法弄清楚如何让每个循环正常工作......这段代码同时显示每一个而不是个别箱子......感谢您的帮助。

<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>

Answer 1

在另一个div中包装每个Click / List对，然后尝试这个修改（请注意，每个都不需要，jQuery将绑定到所有匹配的元素）：

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

应该是：

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

基本上你遇到的错误是因为$('.divActionsList')正在查看整个页面并用类切换所有div（这就是所有这些）。通过使用div对Click和List进行分组，您可以通过检查单击按钮附近的DOM来使jQuery能够轻松找到相应的列表。

基本上上面的内容只是找到被点击的元素的父元素，然后在其中查找所有.div_ActionsList，而不是在整个页面内。

Answer 2

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

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

然后你可以通过做像......这样的事来切换。

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

所以你的最终代码是：

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

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

2 个答案: