如何通过单击链接

我试图做一个登录/注册模式打开引导模式中的特定可折叠的面板，但我不能创造适当的面板在这个模式的链接。如何通过单击链接

按钮：

<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/

来源

2015-08-22 marcJEE

删除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

来源

2015-08-22 12:44:56

它的工作原理！谢谢你为我做的一切：） – marcJEE

这可能会帮助你。

$(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/

来源

2015-08-22 11:28:03 sap

已经很接近了。如果我用快乐的一天场景它是完美的:) – marcJEE

编辑：这是接近。如果我用快乐的一天场景这是完美的:)但是如果我在开模坍塌面板，关闭模式和重复上述过程，那么解决方案是行不通的。我注意到面板崩溃时，类会从崩溃更改为崩溃一段时间。 https://jsfiddle.net/gmoefesr/2/ – marcJEE

@marcJEE，我已经编辑了答案。 – sap

如何通过单击链接

回答

相关问题