Javascript JQuery hide（）在隐藏事件后未持久化

我试图隐藏一个可见部分，然后使用JQuery

.hide（）

和

.show（）

显示一个隐藏部分。当事件触发（单击图像时）时，它仅暂时隐藏可见部分，然后再次可见，之前隐藏的部分现在在第一个可见部分下方可见。根据我读过的文档和我看过的一些教程，这不应该发生

HTML:

---

在单击当前可见的项目图像以显示之前，如何使要隐藏的部分始终保持隐藏状态？我的CSS会干扰我在这里想做的事情吗？如果是这样，我会发布代码。谢谢

也许您的问题是$parentDiv，在这里您使用的是

parents（）

，而不是

closest（）

，您的代码似乎可以按您想要的方式工作。我认为还有其他一些脚本触发使得项目图像包装器再次可见。或者，正如您所建议的，您可以使用CSS强制使其可见。要验证它是否是CSS问题，请使用浏览器的F12工具检查DIV。找到它@贝诺斯本：这确实是另一个剧本引起了这个问题。谢谢大家。

<div class="transition-div">
<section class="project-section">
  <div class="project-wrapper" id="project-one">
    <div class="desc-text">
      <h2>Header</h2>

    </div>
    <div class="project-image-wrapper">
      <img class="project-image" id="project-img-one" src="images/img1.png">
      <button class="project-button">Button
    </button>
  </div>
  </div>
</section>

<section class="project-section hidden">
  <div class="project-wrapper">
    <div class="desc-text">
      <h2>Header</h2>

        <p>Some description text</p>

    </div>
    <div class="project-image-wrapper">
      <img class="project-image" src="images/img1.png">
  </div>
  </div>
</section>
</div>

$('.hidden').hide();

var slideSection = function() {

$('.project-image-wrapper').click(function() {

  var $parentDiv = $(this).parents('.transition-div');
  var $childToShow = $parentDiv.find('.hidden');
  var $childToHide = $childToShow.siblings('.project-section');

  $childToHide.hide(300, hideActiveSection());

  function hideActiveSection() {
    $childToHide.addClass('hidden');
    $childToShow.show(300, function() {
      $(this).removeClass('hidden');
    });
  }

  });

};

slideSection();