Question

基本上，我有一个项目列表，其内容在点击时展开。只能一次扩展一个项目的内容 - 即如果我点击一个项目，它的内容将会扩展，另一个项目的内容将崩溃。

我正在寻找的是如果点击了一个项目并且其内容已经扩展，我希望它能够崩溃。正如我的代码现在，如果内容已经扩展并且点击了该项目，则内容只是重新展开。

非常感谢你的帮助！

JS

$('.image-container').click(function() {
     $('.text-container').hide(200);
     $(this).next('.text-container').show(400);
});

HTML

<div id="class1" class="image-container">
    <a href="#">An Image</a>
</div>
<div id="class1-container" class="text-container">
    <p>Some Content</p>
</div>

 <div id="class2" class="image-container">
    <a href="#">An Image</a>
 </div>
 <div id="class2-container" class="text-container">
     <p>Some Content</p>
 </div>

Answer 1

请参阅http://jsfiddle.net/esgk2hve/

$('.image-container').click(function() {
     $('.text-container').not($(this).next()).hide(200);
     $(this).next('.text-container').toggle(400);
});

项目列表，内容会在点击时展开，如果项目已展开，则展开

1 个答案: