jQuery:每次点击只显示一个元素

Question

我有一个小问题，也许你可以帮我解决？我有 HTML div 以及显示和隐藏功能。

我只想在每次点击时显示一 (1) 个 div，而不是全部。我制作了一个 jquery 代码，但它显示了所有 div。

需要建议。

https://jsfiddle.net/pfcglen/pLfbwve5/2/

jQuery(document).ready(function() {

    var toggleContent = jQuery('.insideContent');
    toggleContent.addClass('hidden');
    var thisElemnt = $(this);
    jQuery('.button').on('click', function() {
        thisElemnt.find('.insideContent').removeClass('hidden').addClass('show');
    });


});

jQuery(document).ready(function() {

  var toggleContent = jQuery('.insideContent');
  toggleContent.addClass('hidden');
  var thisElemnt = $(this);
  jQuery('.button').on('click', function() {
    thisElemnt.find('.insideContent').removeClass('hidden').addClass('show');
  });


});

.hidden {
  display: none !important;
}
.show {
  display: block !important;
}
.list {
  direction: inherit;
  display: flex;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list">
  <div class="col-lg-2 workImage">
    <div class="itemTitle">
      <h2 class="page-header  text-center">Item</h2>
      <button class="button">Open Project</button>
    </div>
    <div class="insideContent">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="col-lg-2 workImage">
    <div class="itemTitle">
      <h2 class="page-header  text-center">Item</h2>
      <button class="button">Open Project</button>
    </div>
    <div class="insideContent">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="col-lg-2 workImage">
    <div class="itemTitle">
      <h2 class="page-header  text-center">Item</h2>
      <button class="button">Open Project</button>
    </div>
    <div class="insideContent">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

Answer 1

jQuery(document).ready(function() {

    var toggleContent = jQuery('.insideContent');
    toggleContent.addClass('hidden');
    var thisElemnt = $(this);
    jQuery('.button').on('click', function() {
        $(this).closest('.itemTitle').next('.insideContent').toggleClass('hidden show');//use $(this) to apply only to click elemt
    });


});

使用.closest()得到最近的父 .itemtitle 然后使用 .next()然后获取目标 div使用 .toggleClass()显示和隐藏目标 div

DEMO