0

我想在手风琴内创建一个切换按钮。这就是我想要做的。

Javascript

$j("div a").live('click', function() {
$j("#toggleButton").click(function () {
      $j("#test p").slideToggle("slow");
    });
});

HTML是：

  <div id="accordion">
    <h3><a href="#">Number 1</a></h3><div><h4> Error1:</h4><p> some contents here </p><div id="content1"><input type="button" value="Hide" id="toggleButton" style="float:right;"><div id="test"> <p>jhfsnv jv jsdhv jsdvb </p></div></div></div>
    <h3><a href="#">Number 2</a></h3><div><h4> Error2:</h4><p> some contents here </p><div id="content1"><input type="button" value="Hide" id="toggleButton" style="float:right;"><div id="test"> <p>jsa shsbc sjhv sf </p></div></div></div>
  </div>

这是我想做的事情：

当我打开手风琴时，我应该看到文本“这里有一些内容”和“隐藏”按钮。当我点击隐藏按钮时，内容即“jhfsnv jv jsdhv jsdvb”应该打开。

我想在手风琴的所有选项上保留“隐藏”按钮。所以不同的手风琴选项会有隐藏按钮，但内容不同。（有没有一种简单的方法来保持所有隐藏按钮的 id 和它们包含的文本相同（尽管单击隐藏按钮时的内容不同））但是所有这些不同的内容都在不同的手风琴选项中。

4

1 回答 1

4

请试试这个工作演示 http://jsfiddle.net/stXP6/ 或 http://jsfiddle.net/z8Jns/

哦，你的 HTML 是无效的，我现在使用 class 对其进行了一些纠正。即id定义元素的身份，因此它应该是唯一的。

希望能满足你的需要:)

代码

$(".test").hide();
$(".toggleButton").click(function() {
    $(this).next(".test").slideToggle("slow");
});​

HTML

<h3><a href="#">Number 1</a></h3><div><h4> Error1:</h4><p> some contents here </p><div id="content1"><input type="button" value="Hide" class="toggleButton" style="float:right;"><div class="test"> <p>jhfsnv jv jsdhv jsdvb </p></div></div></div>
<h3><a href="#">Number 2</a></h3><div><h4> Error2:</h4><p> some contents here </p><div id="content1"><input type="button" value="Hide" class="toggleButton" style="float:right;"><div class="test"> <p>jsa shsbc sjhv sf </p></div></div></div>
Here​​
于 2012-08-06T04:26:23.213 回答