如何slideToggle当前元素兄弟

Question

我试图在点击当前兄弟时显示兄弟姐妹，同时其他打开.stcontent应关闭但改变html代码的结构 html

// handle click and add class
$(".stbtn").on("click", function() {
  $(this).parent().siblings(".wrapper").child(".stcontent").slideUp();
  $(this).siblings(".stcontent").slideToggle();
})

.stbtn {
  background-color: #ccc;
  margin-bottom: 5px;
}

.stbtn,
.stcontent {}

.stcontent {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="stbtn">
    slide Toggle btn1
  </div>
  <div class="stcontent">
    slide Toggle btn content here goes1
  </div>
</div>
<div class="wrapper">
  <div class="stbtn">
    slide Toggle btn2
  </div>
  <div class="stcontent">
    slide Toggle btn content here goes1
  </div>
</div>
<div class="wrapper">
  <div class="stbtn">
    slide Toggle btn3
  </div>
  <div class="stcontent">
    slide Toggle btn content here goes1
  </div>
</div>

Answer 1

您可以使用以下内容来实现相同目标：

// handle click and add class
    $(".stbtn").on("click", function(){
    $('.wrapper').children('.stcontent').hide();
    $(this).closest('.wrapper').children().show();
    });

OR

 $(".stbtn").on("click", function(){
    $('.wrapper').children('.stcontent').slideUp();
    $(this).closest('.wrapper').children().slideDown();
    });

Answer 2

只需添加以下行即可顺畅切换div

$(this).parent().find(".stcontent").slideToggle();

代码段：

＆＃13;

＆＃13;

// handle click and add class
$(".stbtn").on("click", function(){
  $(this).parent().siblings(".wrapper").children(".stcontent").slideUp();
  $(this).parent().find(".stcontent").slideToggle();
})

＆＃13;

.stbtn { background-color:#ccc; margin-bottom:5px;}
.stbtn, .stcontent {  }
.stcontent { display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="stbtn">
    slide Toggle btn1
  </div>
  <div class="stcontent">
    slide Toggle btn content here goes1
  </div>
</div>

<div class="wrapper">
  <div class="stbtn">
    slide Toggle btn2
  </div>
  <div class="stcontent">
    slide Toggle btn content here goes1
  </div>
</div>

<div class="wrapper">
  <div class="stbtn">
  slide Toggle btn3
  </div>
  <div class="stcontent">
  slide Toggle btn content here goes1
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这样可以正常使用

$('.stbtn').on('click', function() {
    var activeParent = $(this).parent('.wrapper');
    $('.wrapper').not(activeParent).children('.stcontent').slideUp();
    $(this).siblings('.stcontent').slideToggle();
})