在使用jQuery单击时隐藏父母的div

Question

我需要我们点击span.opn，然后点击.body div (隐藏/显示)

<li class="panel">

  <div class="head">

    <span class="del"></span>
    <span class="opn"></span>

  </div>

  <div class="body">

   <!-- Something -->

  </div>

</li>

JS

//需要更改.opn类或添加某些类

//需要转换(隐藏/显示)< div class="body“>

jQuery('.opn').on('click', function() {

  jQuery(this).closest('.body').toggle();

});

//需要(删除/删除)< li class="apanel“>单击此( .del )

jQuery('.del').on('click', function() {

  jQuery('li.panel').remove();

});

谢谢

Answer 1

这样就行了

jQuery('.opn').on('click', function() {
  // I want to Change .opn Class or add some class
  $(this).addClass('smoe-class');

  // I want to toglle ( hide/Show ) <div class="body">
  $(this).parent().next('.body').toggle();
});

jQuery('.del').on('click', function() {
  // I want to delete <li> when click this jQuery('.del');    
  $(this).closest('li.panel').remove();
});

Answer 2

$(document).on("click",".opn",function(){
   $(".body").toggle();
});

Answer 3

首先需要找到parent元素，然后用body类查找下一个div，如下所示，

jQuery('.opn').on('click', function() {

  jQuery(this).parent().next('div.body').toggle();

});