Question

我有一堆HTML字段在逻辑上分开：一半的字段位于： div id =＆＃34; general＆＃34; ，另一半位于： div ID =＆＃34;高级＆＃34;

我尝试实施（和失败）的内容如下：

要显示的常规div中的字段（默认情况下）。带有标题＆＃34;高级＆＃34;的按钮所示。并且高级div中的字段将被隐藏。

单击此按钮时，应发生以下情况：

常规部分折叠隐藏所有字段
高级部分展开显示其所有字段
按钮标题更改为＆＃34;常规＆＃34;。

后续点击可切换上述内容。

E.g。在下一次点击时，现在隐藏了高级部分，现在显示了常规部分，并且按钮标题更改为＆＃34;高级＆＃34;

注意：这似乎微不足道，但对于网络前端是新手，我无法轻易搞定。如果我的div部分不正确，请将其废弃。我怀疑我是在正确的轨道上，只需要一些jQuery代码来折叠和扩展div。

以下是我的尝试：

我使用带有 accordian 标记的Bootstrap崩溃插件，但这不是我想要的。尽管如此，但每个部分都有一个标题/按钮。我希望一个标题/按钮以相反的方式切换每个部分。
我使用的Bootstrap崩溃插件没有使用手风琴标记，但结果与尝试1相同 - 再次使用两个按钮。
我尝试使用jQuery动态执行此操作，但无法使逻辑（或语法）正确。

我正在使用Bootstrap，但如果不能使用崩溃插件在Bootstrap中完成，那么很高兴能使用jQuery（或JavaScript）解决方案。

Answer 1

您可以使用jquery通过在元素上切换一个类来决定要显示哪些字段。

例如取一个外div，将普通和高级div放在外div内，并使用css显示基于外部div类的字段，如advanced。并绑定一个按钮以切换外部div上的类。

结帐JSFiddle：http://jsfiddle.net/eqhw2mxx/2/

Answer 2

检查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");
 }
});

Bootstrap折叠部分，用一个按钮展开另一个

2 个答案: