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

标签 javascript jquery html css

我制作了这个显示隐藏示例,当我点击 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>

最佳答案

当您使用 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>

关于javascript - 单击新 h3 后隐藏以前打开的 p 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44684529/

相关文章:

javascript - 在javascript拆分函数中拆分数组元素

javascript - 在这个 sinon.spy mocha 示例中是否有一种简单的方法来更改确认和警报

javascript - 使用 javascript 在中间添加新的 Param URL

html - 如何更改元素符号列表或非元素符号列表中除第一行以外的所有行的缩进?

javascript - 删除 javascript/jquery 中的幻像表格单元格

javascript - 需要 Babel “7.0.0-0” 但加载了 “6.26.3”

Javascript:特定字符之前的粗体字符串

javascript - 使用 jQuery 增加一个月

滚动上的 Jquery 文本动画

javascript - Bootstrap 日期选择器下拉菜单不下降