Question

我正在尝试使用jquery选择一个同级div元素以应用slideToggle

我尝试定位父元素，然后使用.find（），也尝试了同级，但不确定自己在做什么错。

    <div class="col teachers-container px-0">
        <div class="row py-2 teacher-box m-1 shadowed" >
            <div class="teacher-card col center-block">
            </div>
        </div>
        <div class="teacher-intro row px-lg-0" style="">
          <h6 class="paragraph text-justify pb-3 mx-3 pt-1 pt-lg-2" style="">Intro text.</h6>
        </div>
    </div>

我理想中但无法正常工作的情况：

$('.teacher-box').on('click', () => {$(this).parent().children().last().slideToggle()})

这是正在工作，但是其他框中具有教师入门班的所有元素都可以进行幻灯片切换，而我只想定位当前框中的一个：

$('.teacher-box').on('click', () => {$('.teacher-intro').slideToggle()})

Answer 1

如果您使用普通功能而不是箭头功能，则您的第一个解决方案将起作用：

$('.teacher-box').on('click', function() {
  $(this).parent().children().last().slideToggle()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col teachers-container px-0">
        <div class="row py-2 teacher-box m-1 shadowed" >
            <div class="teacher-card col center-block">1
            </div>
        </div>
        <div class="teacher-intro row px-lg-0" style="">
          <h6 class="paragraph text-justify pb-3 mx-3 pt-1 pt-lg-2" style="">Intro text 1.</h6>
        </div>
    </div>
    <div class="col teachers-container px-0">
        <div class="row py-2 teacher-box m-1 shadowed" >2
            <div class="teacher-card col center-block">
            </div>
        </div>
        <div class="teacher-intro row px-lg-0" style="">
          <h6 class="paragraph text-justify pb-3 mx-3 pt-1 pt-lg-2" style="">Intro text 2.</h6>
        </div>
    </div>

或者还有其他方法可以实现：

如果将.teacher-intro放在.teacher-box之后，则可以使用$(this).next().slideToggle()。

否则，如果它们之间有某些元素，则可以使用$(this).nextAll('.teacher-intro').slideToggle()。

Answer 2

您可以使用以下代码使用jquery来切换同级元素，如果要切换特定元素，则应该使用.next()，.first()，.prev()之类的jquery方法， .parent()，.parents()，.children()等

$(".teacher-box").click(function(){
      $( "div.teacher-box" ).siblings().toggle();
  });

使用Jquery选择同级div元素

2 个答案: