javascript - jquery用同一个类一一切换div

Question

单击链接时，我想showhide一一切换 div 。我试图以 div 为目标。但无法达到预期的效果。帮助我实现这一目标。find() next()

如需更多说明，请留下您的评论。

$(document).ready(function() {
  $('.showhide').hide();
  $('.divider a').click(function(e) {
    e.preventDefault();
    //$(".showhide").slideToggle();
    $(this).parent().next().find(".showhide").slideToggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">
    <div class="divider">
        <a href="#">Link 1</a>
    </div>
     <div class="divider">
        <a href="#">Link 2</a>
    </div>
    <div class="divider">
        <a href="#">Link 3</a>
    </div>
</div>
<div class="link-content">
    <div class="divider-desc">
        <div class="showhide">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="showhide">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="showhide">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
    </div>
</div>

标签： javascriptjqueryhtmltoggle

Answer 1

您需要按索引选择。用于.eq()一一选择。

$(document).ready(function() {
      $('.showhide').hide();
      $('.divider').click(function(e) {  // note the change here
        e.preventDefault();
        $(".showhide").eq($(this).index()).slideToggle(); // and selector here with .eq
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">
    <div class="divider">
        <a href="#">Link 1</a>
    </div>
     <div class="divider">
        <a href="#">Link 2</a>
    </div>
    <div class="divider">
        <a href="#">Link 3</a>
    </div>
</div>
<div class="link-content">
    <div class="divider-desc">
        <div class="showhide">
           1  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="showhide">
           2  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="showhide">
           3  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
    </div>
</div>