javascript - 单击元素内部时，div 不会自动关闭

Question

fiddle :https://jsfiddle.net/scrfbe95/

现在我正在使用一个主 div，其中包含一个带有链接的元素列表，一旦您单击某个列表元素，它将在主 div 的右侧显示另一个 div。

但我想做的是，当您单击主 div 内的某个链接时，主 div 不会关闭。

<div id="main-div1" class="main-div">
  Main div 1
  <div class="content">
        <ul>
          <li> <a href=""> item 1 </a> </li>
           <li> <a href=""> item 1 </a> </li>

       </ul>
  </div>
</div>
<div id="main-div2" class="main-div">
  Main div 2
  <div class="content">
        <ul>
          <li> <a href=""> item 1 </a> </li>
           <li> <a href=""> item 1 </a> </li>

       </ul>  </div>
</div>
<div id="main-div3" class="main-div">
  Main div 3
  <div class="content">
        <ul>
          <li> <a href=""> item 1 </a> </li>
           <li> <a href=""> item 1 </a> </li>

       </ul>  </div>
</div>


.main-div {
  padding: 10px;
  margin-top: 5px;
  background-color: #000;
  color: #fff;
}

.main-div > .content {
  display: none;
  color: #fff;
}


(function($) {
    $(document).on('click','.main-div',function() { showMainDiv($(this)); });

  function showMainDiv($el) {
    var $elContent = $el.find('.content');
        if ($elContent.is(':visible')) {
        $elContent.stop(true,true).slideUp(500);
    }
    else {
      $('.main-div').find('.content').stop(true,true).not($elContent).slideUp(500);
      $elContent.slideDown(500);
    }
  }
})(jQuery);

Answer 1

修改点击监听器，使其仅在点击的 div 是预期的 div 时使用react

$(document).on('click','.main-div',function(e) {
  if (e.target !== this)
    return;

  showMainDiv($(this)); });

这是 fiddle ;