弹出窗口内的手风琴，颜色框/模态 Bootstrap答案

【问题标题】：Accordion inside popup, colorbox / modal Bootstrap弹出窗口内的手风琴，颜色框/模态 Bootstrap
【发布时间】：2014-09-28 01:51:30
【问题描述】：

我想在弹出窗口中实现手风琴。可能吗？我尝试用 colorbox 来做，但似乎不可行，所以我尝试使用 bootstrap modal，但似乎我很困惑。

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 3.1.0 - Modal Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
         $(document).ready(function() {
         $("#accordion").accordion({ autoHeight: true });
    });
    </script>
  </head>
  <body>
    <div class="container">
        <h2 style="text-align: center;">Bootstrap 3.1.0 - Modal Demo</h2>
        <div class="row text-center">
            <h3>The Basic Modal</h3>
            <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Click to open Modal</a>
        </div>
        <hr>
    </div>

    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div id="accordion">
          Text / content outside accordion
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        Inside section 1
        </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Inside section 2
        </p>
    </div>
</div>
        </div>
      </div>
    </div>  

  </body>
</html>

我的完整代码：http://jsfiddle.net/g6HA4/2/

感谢您的帮助。

【问题讨论】：

你可以只使用 jquery 本身来做到这一点
嗯...可以解释更多吗？ :)

标签： jquery twitter-bootstrap user-interface accordion

【解决方案1】：

你的JQuery代码不完整，改一下：

$("#accordion").accordion({
 autoHeight: true
});

收件人：

$(function() { $("#accordion").accordion({
 autoHeight: true
  });
});

见Demo

【讨论】：

当有人点击该部分时，模式是否会改变大小？

【解决方案2】：

通过使用 JQuery，您可以在对话框中使用手风琴。此代码可以帮助您

<button id='clicker'>Click For Dialog</button>
<div id='dialog'>
    <div id='accordion'>
        <h3>Section 1</h3>
        <div>
            <p>This is first section of accordian </p>

        </div>
        <h3>Section 2</h3>
        <div>
            This is second section of Accordian
        </div>
    </div>
</div>

和js一样

$(function() {
    $("#accordion").accordion().hide();
    $('#clicker').button().click(function(){
        var overlayDialogObj = {
          autoOpen: true,
          height: 400,
          width: 310,
          modal: false,
          open: function(){
              $('#accordion').accordion(
                  {heightStyle: "fill", collapsible: true}).show();
          },
          buttons: {
             'Done': function() {
                $(this).dialog('close');
             }
          }
       };
        $('#dialog').dialog(overlayDialogObj).show();

    });
});

SEE DEMO HERE

【讨论】：

感谢 jquery 的建议.. 但我仍然需要使用模态.. 感谢您的回答.. :)