使用jQuery单击隐藏父级的父级div

Question

我需要wehen点击span.opn，然后toglle（隐藏/显示）.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类或添加一些类

//需要toglle（隐藏/显示）＆lt; div class =“body”＆gt;

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

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

});

//需要（删除/删除）＆lt; li class =“apanel”＆gt;点击这个（.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元素，然后按照以下内容查找下一个div的正文，

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

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

});