jQuery:点击时仅显示当前div

Question

我的页面上有多个带有显示隐藏内容按钮的div。我能够创建一个函数以便在单击时显示隐藏的 div，但是如何仅显示当前 div 的隐藏内容？

我的js:

$('.js-help-content').hide();

$('.js-show-help').click(function(e){
    e.stopPropagation();
    $('.tip:visible:not(.js-help-content)').hide();
    $('.js-help-content').fadeToggle(200);
});
$('.js-help-content').click(function(e){
    e.stopPropagation();
});
$(document).click(function(){
     $('.js-help-content').fadeOut(200);
});

<强> jsFiddle

Answer 1

这是因为当你去显示内容时，你只使用了类名，而没有对你想要的框进行任何特定的标识。根据您的布局，您希望调用具有要显示的内容的同级的最近父级。就像这样:

$('.js-help-content').hide();

$('.js-show-help').click(function(e){
    e.stopPropagation();
    $('.tip:visible:not(.js-help-content)').hide();
    $('.js-help-content').fadeOut(200);  //  this will hide others
    /* here you see, i grabbed the closest parent that was relative to your content   */
    $(this).closest(".content").next('.js-help-content').fadeToggle(200);
});
$('.js-help-content').click(function(e){
    e.stopPropagation();
});
$(document).click(function(){
     $('.js-help-content').fadeOut(200);
});

.wall {
  width: 250px;
  border: 1px solid tomato;
  padding: 15px;
  margin-bottom: 30px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wall">

  <div class="content">
    <div class="top">
      <a href="#" class="js-show-help">Show hiden content</a>
    </div>
  </div>

  <div class="tip js-help-content">
      <p class="tip-title">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
  </div>

</div>


<div class="wall">

  <div class="content">
    <div class="top">
      <a href="#" class="js-show-help">Show hiden content</a>
    </div>
  </div>

  <div class="tip js-help-content">
      <p class="tip-title">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
  </div>

</div>