Javascript在手风琴引导程序中不起作用

时间:2017-03-31 10:07:00

标签: javascript jquery bootstrap-accordion

我在我的网络应用程序中使用手风琴选项卡,因为我遇到了一个问题,当我按下"继续"按钮,显示在所有选项卡中。

问题在于,当我手动从第5个标签切换到第4个标签并按“继续”按钮返回第5个标签时,在第5个标签中写入的Javascript脚本完全无法正常工作。即使是简单的alert()也无法正常工作。仅当我们手动切换选项卡时才会发生这种情况。

需要帮助来解决这个问题。 TIA

1 个答案:

答案 0 :(得分:0)



$(".button").click(function(){
  $(this).closest(".panel-default").find(".panel-collapse").removeClass("in");
  $(this).closest(".panel-default").next().find(".panel-collapse").addClass("in");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
  
   
  <div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
      <input type="button" class="btn btn-default button" value="continue"/>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">
      <input type="button" class="btn btn-default button" value="continue2"/>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">
      <input type="button" class="btn btn-default button" value="continue3"/>
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;