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

我需要单击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>

//单击此.del时需要删除/删除

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

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

});

谢谢你

这就够了

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();
});

您需要首先找到父元素，然后找到下一个具有body类的div，如下所示

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

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

});

---

你能添加你在评论中提到的li元素吗？

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

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

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

});