-1

我一直在使用 jquery 上的切换功能，但我遇到了一些问题。我可以成功切换我的一个对象，但是当我单击它时，所有对象的隐藏内容都会显示出来，而不是仅显示该特定对象的内容。

以下是相关代码：

剧本：

$(document).ready(function(){

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

});

的HTML：

<button>Click me.</button><br />
<p style="display: none;">Word</p><br />
<button>Click me.</button>
<p style="display: none;">Word</p><br />
<button>Click me.</button>
<p style="display: none;">Word</p><br />
<button>Click me.</button>
<p style="display: none;">Word</p>

CSS：

button {
  display: block; 
  width: 90%; 
  height: 25px; 
  line-height: 10px; 
  background-color: #f4eb79; 
  color: #392e25; 
  text-decoration: none; 
  text-align: center; 
  border: 1px solid #ffffff; 
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px; 
  padding: 7px; 
  -moz-box-shadow: 3px 3px 4px #2e7899;
  -webkit-box-shadow: 3px 3px 4px #2e7899; 
  box-shadow: 3px 3px 4px #2e7899; 
  -moz-transition: background-color 0.3s, -moz-transform 0.3s; 
  -webkit-transition: background-color 0.3s, -webkit-transform 0.3s; 
  transition: background-color 0.3s, transform 0.3s;
  margin-left: 10px;
}

button:hover
{
  color: #ffffff; 
  background-color: #ff8eb3; 
  text-decoration: none; 
  border: 1px solid #ffffff; 
  -moz-box-shadow: 3px 3px 4px #1f5066; 
  -webkit-box-shadow: 3px 3px 4px #1f5066; 
  box-shadow: 3px 3px 4px #1f5066;
}
4

2 回答 2

1

我认为您可能正在寻找的是 jquery 中的.next()方法。我可能还建议将您的两个元素包装在一个 div 中，以便在有多个相同类型的选择器时消除任何参考问题。

例如：

<div>
    <button>Click me.</button>
    <p style="display: none;">Word</p><br />
</div>
<div>
    <button>Click me.</button>
    <p style="display: none;">Word</p><br />
</div>

<script>
    $(document).ready(function(){
        $("button").click(function () {
          $(this).next("p").slideToggle("slow");
        });
    });
</script>
于 2013-07-17T02:40:06.847 回答
0

如果您想一次只隐藏一个 P ：1）您可以使用 ID 并相应地使用选择器，或者您可以将按钮和 p 包装在 div 或 span 中，例如：

<div>
<button>Click me</button>
<p>text</p>
</div>

你的 js 将是：

$("按钮").click(函数 () {

$(this).parents("div").children("p").slideToggle("slow");

});

还没有测试，但你明白了

于 2013-07-17T02:41:07.840 回答