引导程序崩溃部分并用一个按钮展开另一个

我有一堆逻辑上分隔的HTML字段，例如：一半字段位于：div id =“general”另一半驻留在：div id =“先进的”引导程序崩溃部分并用一个按钮展开另一个

我试图实现（和失败）如下：

在一般DIV的字段中显示（默认）。显示标题为“高级”的按钮。高级div中的字段将被隐藏。

当点击这个按钮，应该出现以下情况：

常规部分折叠隐藏所有它的领域
Advanced部分展开显示它的所有领域
按钮标题更改为“常规”。

后续点击切换上述内容。

E.g.在下一次单击时，现在隐藏了高级部分，现在显示了常规部分，并且按钮标题更改为“高级”

注意：这看起来微不足道，但对于Web前端来说是新的，我无法获取此容易。如果我的div部分不正确，请将其取消。我怀疑我在正确的轨道上，只需要一些jQuery代码来折叠和展开div。

下面是我的尝试：

我使用的引导崩溃插件与手风琴标记，但是这不是我想要的。它虽然接近，但每个部分都有一个标题/按钮。我想要一个标题/按钮以相反的方式切换每个部分。
我使用了不带手风琴标记的Bootstrap折叠插件，但是与尝试1 - 两个按钮的结果相同。
我试着用jQuery来动态地做到这一点，但无法获得正确的逻辑（或语法）。

我使用的是引导，但很高兴去与jQuery（或JavaScript）解决方案，如果它不能做到完全的引导与崩溃插件。

来源

2014-11-05 Thomas Veil

检查的jsfiddle： - JSFiddle

$("#advanced").addClass('hide'); 
    $(".button").click(function(){ 
    $("#advanced").toggleClass('hide'); 
    $("#general").toggleClass('hide'); 
    if($(this).attr("value") == "Advanced"){ 
    $(this).attr("value","General"); 
    } 
else if($(this).attr("value") == "General"){ 
    $(this).attr("value","Advanced"); 
} 
});

来源

2014-11-05 06:19:36 Rushee

你可以使用jquery通过切换元素上的类来决定显示哪些字段。

为例如采取外部div，并把普通和先进的div内div内，并只显示基于外部div类，如advanced使用CSS的字段。并绑定一个按钮来切换外部div上的类。

结帐的jsfiddle这里：http://jsfiddle.net/eqhw2mxx/2/

来源

2014-11-05 05:56:32

更新的jsfiddle链接 – 2014-11-05 05:58:02

引导程序崩溃部分并用一个按钮展开另一个

回答

相关问题