Question

我在页面上有多个div，带有Show hidden content按钮。我能够创建一个函数，以便在点击时显示隐藏的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>

Answer 2

您可以依赖于单击的链接索引，并使用eq函数选择具有相同索引.eq($(this).index('.js-show-help'))的div，因为对于每个帮助div，都有一个链接，它将具有相同的索引由于标记结构，类.js-show-help中的链接：

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

<强> Updated Fiddle

Answer 3

你可以做你想做的事：

$('.js-help-content').hide();
$('.js-show-help').click(function(e) {
  e.stopPropagation();
  $('.js-show-help').not(this).closest('.content').next('.js-help-content').fadeOut(200);
  $(this).closest('.content').next('.js-help-content').fadeToggle(200);
});
$(document).click(function() {
  $('.js-help-content').fadeOut(200);
});

jsFiddle example

使用.closest()和.next()，您可以遍历DOM，只打开和关闭所需的div。

jQuery：在点击时仅显示当前div

3 个答案: