Question

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

我有一些要隐藏的内容，当我点击div时，内容会显示出来。到目前为止没问题。问题是我希望这种情况发生，但有多个类和div具有相同的类，如下所示格式

Div.class

-Hidden Content.class_other

Div.class

-Hidden Content.class_other

Div.class

-Hidden Content.class_other

Div.class

-Hidden Content.class_other

当我点击一个Div.class时，只有隐藏的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');
         });
     });
 });

重叠切换问题

1 个答案: