单击内部项目时，Div不会自动关闭

Question

小提琴：https://jsfiddle.net/scrfbe95/

现在我正在使用带有链接的项目列表的主div，一旦你单击一个certein列表项，它将在主div的右侧显示另一个div。

但我试图做的是当你点击主div内的certein链接时，主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时才会做出反应

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

  showMainDiv($(this)); });

这是fiddle;