javascript - 单击新 h3 后隐藏以前打开的 p 标签

Question

我制作了这个显示隐藏示例，当我点击 h3 时，将显示 p 标签的描述，但我遇到了问题。我想隐藏点击新的 h3 后打开的前一个 p。有什么解决办法吗？我不明白。请帮忙。

$("h3").click(function(){
	$(this).next("p").toggle("slow");
});

p{display:none;}
.f,.s{float:left;margin:10px}
h2{margin:0px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="f">
<h2>
Web Development
</h2>
<ul>
<li><h3>
edfdfs
</h3>
<p>
jkksfhskhsdf hf dh dhffsdh hfdd s
</p>
</li>
<li><h3>
fsfsf sd 
</h3>
<p>
jhjsdhfsjkf hdsjfhh dh shds khsdk sd
</p></li>
<li><h3>
dfsdfdfs
</h3>
<p>
kdhs hkdhj djh sdh sdkh
</p></li>
<li><h3>
dcsdcs
</h3>
<p>
kjsdjjskd
</p></li>
</ul>
</div>
<div class="s">
<h2>
Web Development
</h2>
<ul>
<li><h3>
edfdfs
</h3>
<p>
jkksfhskhsdf hf dh dhffsdh hfdd s
</p>
</li>
<li><h3>
fsfsf sd 
</h3>
<p>
jhjsdhfsjkf hdsjfhh dh shds khsdk sd
</p></li>
<li><h3>
dfsdfdfs
</h3>
<p>
kdhs hkdhj djh sdh sdkh
</p></li>
<li><h3>
dcsdcs
</h3>
<p>
kjsdjjskd
</p></li>
</ul>
</div>
<div class="t">
<h2>
Web Development
</h2>
<ul>
<li><h3>
edfdfs
</h3>
<p>
jkksfhskhsdf hf dh dhffsdh hfdd s
</p>
</li>
<li><h3>
fsfsf sd 
</h3>
<p>
jhjsdhfsjkf hdsjfhh dh shds khsdk sd
</p></li>
<li><h3>
dfsdfdfs
</h3>
<p>
kdhs hkdhj djh sdh sdkh
</p></li>
<li><h3>
dcsdcs
</h3>
<p>
kjsdjjskd
</p></li>
</ul>
</div>

Answer 1

当您使用 toggle 时，您只需要隐藏其他 p 而不是下一个 p

$("h3").click(function(){
    $('.f p').not($(this).next("p")).hide();
    $(this).next("p").toggle("slow");
});

Demo 1 如果您需要在每个 parent div 中隐藏其他 p

$("h3").click(function(){
    $(this).closest('.containDiv').find('p').not($(this).next("p")).slideUp();
	$(this).next("p").slideToggle();
});

p{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="f containDiv">
  <h2>Web Development</h2>
  <ul>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
  </ul>
</div>
<div class="s containDiv">
  <h2>Web Development</h2>
  <ul>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
  </ul>
</div>
<div class="t containDiv">
  <h2>Web Development</h2>
  <ul>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
  </ul>
</div>

Demo 2 如果你需要在所有div中隐藏所有p

$("h3").click(function(){
  $('.containDiv').find('p').not($(this).next("p")).slideUp();
	$(this).next("p").slideToggle();
});

p{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="f containDiv">
  <h2>Web Development</h2>
  <ul>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
  </ul>
</div>
<div class="s containDiv">
  <h2>Web Development</h2>
  <ul>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
  </ul>
</div>
<div class="t containDiv">
  <h2>Web Development</h2>
  <ul>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
    <li>
      <h3>edfdfs</h3>
      <p>jkksfhskhsdf hf dh dhffsdh hfdd s</p>
    </li>
  </ul>
</div>