如何通過單擊鏈接

Question

我試圖做一個登錄/註冊模式打開引導模式中的特定可摺疊的面板，但我不能創造適當的面板在這個模式的鏈接。

按鈕：

<div class="btn-group"> 
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle activation-menu-cta" aria-expanded="false">Btn <span class="caret"></span></button> 
<ul class="dropdown-menu dropdown-menu-right-fix"> 
    <li><a id="panelOne" type="btn" data-toggle="modal" href="#myModal">panel one</a></li> 
    <li><a id="panelTwo" type="btn" data-toggle="modal" href="#myModal">panel two</a></li> 
</ul> 

模式：

<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
       <div class="panel panel-default"> 
        <div class="panel-heading" role="tab" id="headingOne"> 
         <h4 class="panel-title"> 
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
           panel one 
          </a> 
         </h4> 
        </div> 
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
         <div class="panel-body">text 1</div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="panel-heading" role="tab" id="headingTwo"> 
         <h4 class="panel-title"> 
          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
           panel two 
          </a> 
         </h4> 
        </div> 
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
         <div class="panel-body">text 2</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

https://jsfiddle.net/gmoefesr/1/

Answer 1

刪除data-toggle="modal"來自你的按鈕的屬性，加open-modal類，並在腳本部分設置.modal('show') method。

你也應該刪除type="btn"因爲它不是對錨正確的屬性。

使用引導模式X.bs.modal事件保持collapse動畫可見模式打開時。

HTML：

<li><a class="open-modal" href="#collapseOne">panel one</a></li> 
<li><a class="open-modal" href="#collapseTwo">panel two</a></li> 

JS：

var panelTarget; 
$('#myModal').on('shown.bs.modal', function(){ 
    $(panelTarget).collapse('show'); 
}); 

$('.open-modal').click(function(){ 
    panelTarget = $(this).attr('href'); 
    $('.collapse.in').collapse('hide'); 
    $('#myModal').modal('show'); 
}); 

JSFiddle demo

Answer 2

這可能會幫助你。

$(document).ready(function() { 
     $('.collapse').collapse(); 
     $('#panelOne').click(function() { 
      $('#collapseOne').collapse('show'); 
      $('#collapseTwo').collapse('hide'); 
     }); 
     $('#panelTwo').click(function() { 
      $('#collapseTwo').collapse('show'); 
      $('#collapseOne').collapse('hide'); 
     }); 
    }); 

http://jsbin.com/ropamajola/1/