Question

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

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

感谢您的帮助。

Answer 1

您的JQuery代码未完整，请更改：

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

要：

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

请参阅Demo

Answer 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

手风琴里面有popup，colorbox / modal Bootstrap

2 个答案: