我使用 Bootstrap Accordion 作为创建表单的独特方式。基本上,该表格在其自己的 Accordion 面板中有 7 个部分。现在我有它,就像我想要的那样,它们都折叠了,当你打开第一个 Accordion 时,有一个链接到第二个 Accordion 的按钮。这正是我希望它工作的方式。但是,有没有办法在选择“下一步”按钮之前隐藏其他 Accordion 面板?
例如,当我加载页面时,我只希望他们能够看到“1. 选择功能”,当他们打开它并选择他们的元素时,当他们按下一个按钮时,即第二个面板变得可见并打开时.等等。
我假设我可以做一些隐藏它们并且按钮触发它可见的事情?我一直在寻找这样的例子,但我找不到任何东西。我知道这个网站不是代码编写服务,所以如果有人能给我指出正确的方向,我就可以做剩下的事情。
<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 中重新创建了它,因此您可以看到我在说什么并使用它。
最佳答案
您可以使用 hide()
方法在 ready 函数中第一次隐藏您想要的 div,例如:
$('#panel2, #panel3').hide();
之后,您应该为每个按钮 next
添加一个标识符 id
,然后为其附加一个 click
事件以控制您的 Accordion
每次点击都如您所愿。
$('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>
关于javascript - 如何控制 Bootstrap Accordion 表单的可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34315567/