javascript - 想要在单击 html 时显示特定的 div

Question

假设我有三个类名为 p1、p2 和 p3 的段落以及三个类名为 div1、div2 和 div3 的 div。所有 div 都被隐藏。现在，当我单击 p1 类时，仅显示 div1，而当单击 p2 类时，div1 关闭并 div2 显示。

但在我的代码中，同时单击 p1 或 p2 或 p3 所有 div(div1, div2, div3) 显示。

CSS

.ask_btn_paragraph
{display : none;}

html

<p class="ask_btn"><span>&#43;</span>This is first paragraph</p>
<div class="ask_btn_paragraph">1stHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjnHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn</div>
<p class="ask_btn"><b><span>&#43;</span>This is second paragraph</b></p>
<div class="ask_btn_paragraph">2ndHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issndnknskjnskjnHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn</div>
<p class="ask_btn"><b><span>&#43;</span>This is third paragraph</b></p>
<div class="ask_btn_paragraph">3rdHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issndnknskjnskjnHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn</div>

脚本

$('.ask_btn').click(function () {
        $(".ask_btn_paragraph").toggle();
 })

问题出在哪里？请有人帮助我....

Answer 1

因为 $(".ask_btn_paragraph") 将选择所有 p 类 .ask_btn_paragraph 并隐藏它们。你应该

• 使用.hide()隐藏所有'.ask_btn_paragraph'
• 使用 next()
获取点击元素的下一个元素
• 然后使用 is(':visible')
检查元素的可见性
• 然后 show() 如果它是隐藏的。

$('.ask_btn').click(function(){
  let x = $(this).next();
  let hidden = !x.is(':visible')
  $('.ask_btn_paragraph').hide();
  if(hidden) x.show();
})

.ask_btn_paragraph
{display : none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="ask_btn"><span>&#43;</span>This is first paragraph</p>
<div class="ask_btn_paragraph">1stHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjnHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn</div>
<p class="ask_btn"><b><span>&#43;</span>This is second paragraph</b></p>
<div class="ask_btn_paragraph">2ndHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issndnknskjnskjnHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn</div>
<p class="ask_btn"><b><span>&#43;</span>This is third paragraph</b></p>
<div class="ask_btn_paragraph">3rdHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issndnknskjnskjnHello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn Hello This issnknskjnskjn</div>