Question

我使用bootstrap手风琴作为创建表单的独特方式。基本上，该表格在其自己的手风琴面板中各有7个部分。现在我正好想要它们全部倒塌的地方，当你打开第一架手风琴时，有一个按钮连接到第二个手风琴。这正是我希望它的工作方式。然而有没有办法隐藏其他手风琴小组直到＆＃34; next＆＃34;按钮已被选中？

例如，当我加载页面时，我只希望他们能够看到＆＃34; 1.选择功能＆＃34;当他们打开那个并按下下一个按钮时选择他们的项目，当第二个面板变得可见并打开时。等等。

我假设我可以做一些我隐藏它们的按钮并且按钮触发它可见？我一直在寻找这样的例子，但我找不到任何东西。我知道这个网站不是代码编写服务，所以如果有人能指出我正确的方向，我可以做其余的事情。

<div class="panel-group" id="accordion">
  <div class="panel panel-default" id="panel1">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. Select Features </a> </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
            Testing 1
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel2">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 2. Select Styles </a> </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 2
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel3">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 3. Contact Info </a> </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 3
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button>
      </div>
    </div>
  </div>

</div>

我在JSFiddle中重新创建它，这样你就可以看到我正在谈论和玩它的东西。

Fiddle HERE

Answer 1

您可以使用hide()方法首次在准备好的功能上隐藏您想要的div，例如：

$('#panel2, #panel3').hide();

之后，您应该为每个按钮id添加一个标识符next，然后附加一个click事件，以便在每次点击时控制您的accordion。< / p>

$('body').on('click', '#btn-next-id', function(){
    //Here show hide divs you want
})

希望这有帮助。

<强>段

$(function(){
    //Hide other steps for the first time
    $('#panel2, #panel3').hide();
    
    $('body').on('click', '#next1', function(){
        $('#panel2').show();
    })

    $('body').on('click', '#next2', function(){
        $('#panel3').show();
    })
})

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

I'm using the bootstrap accordion. 


<div class="panel-group" id="accordion">
  <div class="panel panel-default" id="panel1">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. CHOOSE YOUR INDUSTRY </a> </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
            Testing 1
        <button id="next1" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel2">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 2. STANDARD FEATURES </a> </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 2
        <button id="next2" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel3">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 3. REAL ESTATE FEATURES </a> </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 3
        <button id="next3" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button>
      </div>
    </div>
  </div>

</div>

Answer 2

我不确定这是否正是您正在寻找的，但是如何从第2步和第3步的标题中删除锚元素，以便用户无法点击他们打开他们？更新了小提琴：https://jsfiddle.net/DTcHh/15338/

<div class="panel-group" id="accordion">
  <div class="panel panel-default" id="panel1">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 1. CHOOSE YOUR INDUSTRY </a> </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
            Testing 1
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel2">
    <div class="panel-heading">
      <h4 class="panel-title">  2. STANDARD FEATURES </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 2
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel3">
    <div class="panel-heading">
      <h4 class="panel-title"> 3. REAL ESTATE FEATURES </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
          Testing 3
        <button type="button" class="btn btn-success" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> Next </button>
      </div>
    </div>
  </div>

</div>

你甚至添加了一个＆＃34;上一个＆＃34;按钮到第2步和第3步，以便他们可以重新启动过程？这里更新了小提琴：https://jsfiddle.net/DTcHh/15339/

如何控制Bootstrap手风琴表格的可见性

2 个答案: