twitter bootstrap手风琴折叠并仅在正负上关闭

我正在使用Bootstrap3。我有一个手风琴部件。在那个手风琴中，我点击了div的打开和关闭。但我的要求是手风琴div应该仅在正负图标点击时打开和关闭。我的代码如下：twitter bootstrap手风琴折叠并仅在正负上关闭

<div data-target="#earlierOwner1" data-parent="#accordion" data-toggle="collapse" class="panel-group accordion1" aria-expanded="true"> 
         <div class="panel panel-default"> 
          <div class="panel-heading active"> 
           <h4 class="panel-title"> 
            <a class="" href="#earlierOwner1" data-parent="#accordion" data-toggle="collapse" aria-expanded="true">O1-34676844<span class="spanAmtLeft">200</span></a> 
           </h4> 
          </div> 

         <div class="panel-collapse collapse" id="earlierOwner1" aria-expanded="true"> 
          <div class="panel-body inputTable orderSRacccontent"> 
       <!-- payment mode section --> 
    <div class="row marginTop20"> 
     <div class="col-lg-12 col-md-12"> 
      <ul role="tablist" class="nav nav-tabs" id="paymentMode"> 
</ul> 
</div> 
</div>

来源

2016-05-17 sarvesh gannamaneedi

删除数据，拨动=父格“崩溃”，并把它变成加号和减号图标

来源

2016-05-17 07:32:32

目前还不清楚你想要做什么，因为你的源代码不足。

关于仅需要加号/减号按钮切换手风琴的问题，请勿将.panel-title包装在锚点（<a>）标记中。相反，将其包装在<p>或<h2>标记中。然后在同一个班级中，添加一个包含正/负图形的标签并将其设置为触发器。

<div class="panel-heading active"> 
     <h4 class="panel-title"> 
       <a class="" href="#earlierOwner1" data-parent="#accordion" data-toggle="collapse" aria-expanded="true">This is where you'll want your icon.</a> 
       <p>O1-34676844<span class="spanAmtLeft">200</span></p> 
     </h4> 
</div>

来源

2016-05-17 07:39:40

试试这个

$(document).ready(function(){ 
 
$('.collapse').on('shown.bs.collapse', function(){ 
 
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus"); 
 
}).on('hidden.bs.collapse', function(){ 
 
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus"); 
 
}); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body style="height:1500px"> 
 
<div class="container"> 
 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
 
      <span class="glyphicon glyphicon-plus"></span> 
 
      <a class="" href="#earlierOwner1" data-parent="#accordion" data-toggle="collapse" aria-expanded="true">O1-34676844<span class="spanAmtLeft">200</span></a> 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
     <div class="row marginTop20"> 
 
     <div class="col-lg-12 col-md-12"> 
 
      <ul role="tablist" class="nav nav-tabs" id="paymentMode"> 
 
</ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2016-05-17 08:42:08

twitter bootstrap手风琴折叠并仅在正负上关闭

回答

相关问题