单击新h3后隐藏先前打开的p标记

Question

我制作了这个节目隐藏示例，当我点击h3时，会显示p标记的说明，但此处我遇到了问题。我想隐藏点击新p后打开的先前h3。有什么解决方案吗？我没有得到它。请帮忙。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用toggle时，您只需隐藏其他p，但不能隐藏下一个p

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

演示1 如果您需要隐藏每个p div中的其他parent

＆＃13;

＆＃13;

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

＆＃13;

p{display:none;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

演示2 如果您需要隐藏所有div中的所有p

＆＃13;

＆＃13;

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

＆＃13;

p{display:none;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;