Question

我正在尝试构建一个简单的打开/关闭下拉类型的东西。像

这样的东西

-Point 1
   content
+Point 2
+point 3

这是我的代码

<html>
<head>
    <style>
        #drop-down
        {
            display:none;
            margin-left:30px;
        }
        .closed
        {
            cursor:pointer;
        }
        .opened
        {
            cursor:pointer;
        }
    </style>
    <script src="jquery.js" ></script>
</head>
<body>
    <div>
        <h3 class="closed">+ First Line</h3>
        <div id="drop-down">
            <p>Random content</p>
        </div>
    </div>
    <div>
        <h3 class="closed">+ First Line</h3>
        <div id="drop-down">
            <p>Random content</p>
        </div>
    </div>
    <div>
        <h3 class="closed">+ First Line</h3>
        <div id="drop-down">
            <p>Random content</p>
        </div>
    </div>
</body>
<script>
    $('.closed').click(function(){
        $(this).nextAll('#drop-down').css("display","block");
        $(this).removeClass('closed');
        $(this).addClass('opened');
    });
    $('.opened').click(function(){
            $(this).nextAll('#drop-down').css("display","none");
            $(this).removeClass('opened');
            $(this).addClass('closed');
    });
</script>
</html>

这会打开下拉列表。但是不要关闭它。所以我改变了我的代码，如

<script>
    $('.closed').click(function(){
        $(this).nextAll('#drop-down').css("display","block");
        $(this).removeClass('closed');
        $(this).addClass('opened');
        $('.opened').click(function(){
            $(this).nextAll('#drop-down').css("display","none");
            $(this).removeClass('opened');
            $(this).addClass('closed');
        });
    });
</script>

现在打开和关闭工作但只有一次。如果我继续像这样嵌套，它会一直工作到我嵌套的水平。如何在没有连续嵌套的情况下完成这项工作。我在这里做错了什么？

Answer 1

仅在代码下方使用

<script>
    $('.closed').click(function(){
        $(this).nextAll('#drop-down').toggle(); 


    });

</script>

Answer 2

对于您的特定代码，问题是事件没有绑定到 new 元素。

使用.click绑定时，它只会绑定当前在DOM中的元素的事件。

这就是嵌套事件绑定时的原因。从技术上讲，你可以通过在每次点击后重新绑定click事件来使这个工作（不是很有效），这就是你对嵌套所做的事情。

您需要使用.on来触发任何新元素的事件：

$(document).on("click", ".closed", function () {
    $(this).nextAll('.drop-down').css("display", "block");
    $(this).removeClass('closed');
    $(this).addClass('opened');
});

此外，您应该为选择器使用class而不是id。 id应该始终是唯一的。由于所有下拉菜单都具有共同的质量，因此您应该使用class代替。

Take a look at this jsfiddle.

Answer 3

如上所述，ID是唯一的，不能使用两次。接下来，如果您要动态更改类，则需要使用委托。此外，您的javascript应该在文档准备就绪。

HTML：

<div>
    <h3 class="closed">+ First Line</h3>
    <div class="drop-down">
        <p>Random content</p>
    </div>
</div>
<div>
    <h3 class="closed">+ First Line</h3>
    <div class="drop-down">
        <p>Random content</p>
    </div>
</div>
<div>
    <h3 class="closed">+ First Line</h3>
    <div class="drop-down">
        <p>Random content</p>
    </div>
</div>

Javascript：

$(function(){
    $('body').on('click', '.closed', function(){
        $(this).nextAll('.drop-down').css("display","block");
        $(this).removeClass('closed');
        $(this).addClass('opened');
    });

    $('body').on('click', '.opened', function(){
        $(this).nextAll('.drop-down').css("display","none");
        $(this).removeClass('opened');
        $(this).addClass('closed');
    });
});

Answer 4

你可以这样做：

添加accordian类并将id="drop-down"更改为class="drop-down"（因为您不应多次更改相同的ID），因此请更改drop-down css定义。 HTML

<div>
        <h3 class="accordian closed">+ First Line</h3>
        <div class="drop-down">
            <p>Random content</p>
        </div>
    </div>
    <div>
        <h3 class="accordian closed">+ First Line</h3>
        <div class="drop-down">
            <p>Random content</p>
        </div>
    </div>
    <div>
        <h3 class="accordian closed">+ First Line</h3>
        <div class="drop-down">
            <p>Random content</p>
        </div>
    </div>

jQuery：

$(document).ready(function() {
$('.accordian ').click(function(){
     $('.accordian ').removeClass('opened').addClass('closed');
     $('.drop-down').hide();
     $(this).addClass('opened').removeClass('closed');
     $(this).next('.drop-down').show();
    });
});

CSS

.drop-down
        {
            display:none;
            margin-left:30px;
        }
        .closed
        {
            cursor:pointer;
        }
        .opened
        {
            cursor:pointer;
        }

工作JSFiddle

在jquery中循环操作/事件

4 个答案: