Question

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

的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和它们包含的文本相同（虽然单击隐藏按钮时的内容不同））但所有这些不同的内容都在不同的手风琴选项中。

Answer 1

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

哦，你的HTML无效我现在使用类已经纠正了一下。即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

使用jquery在手风琴中切换按钮

1 个答案: