使用jquery在手风琴内切换按钮 [英] Toggle button inside accordion using jquery

问题描述

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

Javascript

  $ j（div a）。live（'click'，function（）{
 $ j（＃toggleButton）。click（function（）{
 $ j（＃test p） .slideToggle（slow）; 
}）; 
}）; 
  

HTML是：

 < div id =accordion> 
< h3>< a href =＃>编号1< / a>< / h3>< div>< h4> ERROR1：其中/ H4>< p为H.这里的一些内容< / p>< div id =content1>< input type =buttonvalue =Hideid =toggleButtonstyle =float：right;>< div id = 测试 > < p> jhfsnv jv jsdhv jsdvb< / p>< / div>< / div>< / div> 
< h3>< a href =＃>编号2< / a>< / h3>< div>< h4>误差2：其中; / H4>< p为H.这里的一些内容< / p>< div id =content1>< input type =buttonvalue =Hideid =toggleButtonstyle =float：right;>< div id = 测试 > < p> jsa shsbc sjhv sf< / p>< / div>< / div>< / div> 
< / div> 
  

以下是我想要做的：

<当我打开手风琴时，我应该看到这里有些内容和隐藏按钮。当我点击隐藏按钮时，应该打开jhfsnv jv jsdhv jsdvb这个内容。

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

解决方案

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

哦，你的HTML无效我现在用class修正了一下。即 id 定义元素的身份，因此它应该是唯一的。

希望它适合您的需要<$ c $

$ b

代码

p> $（ 测试）隐藏（）;
$（。toggleButton）。click（function（）{
$（this）.next（。test）。slideToggle（slow）;
}）;


HTML

 < h3>< a href =＃>数字1< / a>< / h3>< div>< h4> ERROR1：其中/ H4>< p为H.这里的一些内容< / p>< div id =content1>< input type =buttonvalue =Hideclass =toggleButtonstyle =float：right;>< div class = 测试 > < p> jhfsnv jv jsdhv jsdvb< / p>< / div>< / div>< / div> 
< h3>< a href =＃>编号2< / a>< / h3>< div>< h4>误差2：其中; / H4>< p为H.这里的一些内容< / p>< div id =content1>< input type =buttonvalue =Hideclass =toggleButtonstyle =float：right;>< div class = 测试 > < p> jsa shsbc sjhv sf< / p>< / div>< / div>< / div> 
这里
  

I want to create a toggle button inside an accordian. Here is what I was trying to do.

Javascript

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

HTML is:

  <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>

Here is what I want to do:

When I open the accordion I should see the text "some contents here" and "Hide" button. When I click on the hide button the contents i.e."jhfsnv jv jsdhv jsdvb " should open.

I want to keep the "hide" button on all options of accordion. So different accordion options will have hide button but with different contents. (Is there a easy way to keep the id of all the hide buttons and the text they contains same (although the contents while clicking on hide button are different)) But all these different contents are within different accordion options.

解决方案

Try this please Working Demo http://jsfiddle.net/stXP6/ or http://jsfiddle.net/z8Jns/

Oh and your HTML ain't valid I have rectified it a bit now using class. i.e. id defines identity of the element hence it should be unique.

Hope it fits your need :)

code

$(".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在手风琴内切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！