Question

我尝试添加多个按钮，当我点击一个按钮时，其余按钮也会被点击。

我如何让每个按钮单独切换？

另外，如何在页面加载时默认隐藏它们？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideToggle demo</title>
  <style>
  p {
    width: 400px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Toggle 1</button>
<p>
 Text 1
</p>

<button>Toggle 2</button>
<p>
 Text 2
</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).slideToggle( "slow" );
});
</script>
 
</body>
</html>

修改

谢谢大家，每个代码都有效！

只有最后一件事，我怎么能在主按钮中有多个带有独特段落的按钮？

示例：

[MainButton.A] <--(Shows additional buttons when clicked)
[ButtonA.1] <--(Shows it's own paragraph when clicked, same as the rest)
[ButtonA.2]

[MainButton.B]
[ButtonB.1]
[ButtonB.2]

Answer 1

问题不在于点击了所有按钮;它是每次点击一个按钮时都会操纵所有段元素。

@ ArunPJohny的评论有解决方案：

$("button").click(function() {
  $(this).next("p").slideToggle( "slow" );
});

这样做是选择 next <p>元素而不是所有元素。请注意.next()选择器。

Answer 2

试试这个......

<script>
$(document).ready(function(){
   $("p").hide();//hides all <p> initially shows only button clicked..
   $( "button" ).click(function() {
     $(this).next( "p" ).slideToggle( "slow" );  
   });
});
</script>

小提琴https://jsfiddle.net/ohes689y/

Answer 3

这是你的答案

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideToggle demo</title>
  <style>
  p {
    width: 400px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button class="btncls">Toggle 1</button>
<p>
 Text 1
</p>

<button class="btncls">Toggle 2</button>
<p>
 Text 2
</p>
 
<script>
$(".btncls").click(function() {
  $(this).next().slideToggle( "slow" );
});
</script>
 
</body>
</html>

单独使用“.slideToggle（）”和多个按钮

3 个答案: