Question

我正在尝试在Bootstrap模式窗口的左侧添加navbar。

我发现navbar为hard-coded时很容易就能完成。但是，当使用JQuery动态添加它时，这是一个挑战。

我的Bootstrap3模式如下所示，可在此Bootply上找到：

<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 class="modal-body">            
              <div class="container-fluid">
                <div class="row">
                  <div class="col-sm-3 sidebar">
                    <ul id="left_links" class="nav nav-sidebar">

                       <!-- <li> links added dynamically here </li>-->  

                    </ul>
                  </div>
                  <div class="col-sm-9 main">
                        <div class="container-fluid">
                            <div class="row">
                              <div id="content"></div>
                            </div>
                        </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
  </div>
</div>

我正在尝试使用以下方法添加它们：

var links = ['main.html','index1.html','index2.html'];
for (var i=0;i<links.length;i++){ 
    // Add links 
    $("#left_links ul").append('<li><a href="#">'+links[i]+'</a></li>'); 

}

我拥有的CSS，以便自动重新调整模态高度：

.modal-body {
    max-height: auto;
    overflow-y:scroll;
 }

但是，链接不会出现，模式也不会根据插入的链接数重新调整其高度。

Answer 1

看起来它只是一个简单的选择器问题。将#left_links ul更改为#left_links可以在Bootply中正常运行。

var links = ['main.html','index1.html','index2.html'];
for (var i=0;i<links.length;i++){ 
    // Add links 
    $("#left_links").append('<li><a href="#">'+links[i]+'</a></li>'); 

}

将导航栏添加到Boostrap模式

1 个答案: