重叠切换问题

Question

我正在尝试在 jQuery 中构建这段代码，希望您能帮助我！所以：

我有一些要隐藏的内容，当我单击 div 时，内容就会显示出来。到目前为止没问题。问题是我希望这发生但是有多个 classes 和 divs 具有相同的 class 有点像下面的格式

Div.class

-隐藏Content.class_other

Div.class

-隐藏Content.class_other

Div.class

-隐藏Content.class_other

Div.class

-隐藏Content.class_other

当我单击 Div.class 时，只会显示 "inside it" 的隐藏 Content.class_other（如兄弟姐妹？），而不会显示任何其他内容。如果显示那个，我应该点击其他 Div.class，它包含的内容会显示，而显示的那个会崩溃，我觉得我太混乱了...

这是我目前为我需要的工作编写的代码

<div class="dropdown1">click</div>
<div class="series">bla bla</div>
<div class="dropdown2">also click</div>
<div class="trofeu">bla bla</div>

和

$(document).ready(function(){

$('.series , .trofeu').hide();

$('.dropdown1').click(function() {

$('.series').slideToggle();

});

$('.dropdown2').click(function() {

$('.trofeu').slideToggle();

});

});

还有一个Pen

Answer 1

如果你做了这样的事情怎么办？您也可以使用不同的 html 标记。只需调整 jquery

<div id="dropdown">
    <ul>
        <li>
                <h3>first title</h3>

            <div class="row">
                <p>Lorem ipsum dolor sit amet Aliquam.</p>
            </div>
        </li>
        <li class="active">
                <h3>some title</h3>

            <div class="row">
                <p>Lorem ipsum dolor Aliquam.</p>
            </div>
        </li>
        <li>
                <h3>sometitle2</h3>

            <div class="row">
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        </li>
        <li>
                <h3>some title3</h3>

            <div class="row">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut tincidunt risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam id venenatis tortor, a bibendum augue. Sed magna turpis, facilisis in posuere auctor, aliquam eget mauris. Integer non lectus at risus elementum auctor. Aliquam.</p>
            </div>
        </li>
    </ul>
</div>

然后 jquery 将是：

$(document).ready(function () {
     $("#dropdown li h3").click(function () {
         var $parent = $(this).parent();
         if ($parent.hasClass('active')) return;

         $("#dropdown ul .row").not().slideUp();
         $(this).next().slideDown(function () {
             $parent.addClass('active').siblings().removeClass('active');
         });
     });
 });

重叠切换问题

Overlapping toggle issue

html

css

jquery

overlapping