我的侧边栏的可打开的pannels不工作,当我使它动态通用的所有页

问题描述:

我使用引导模板创建网站有一个侧栏与treeview结构,当我使它动态共同为所有页面(使用jquery) 它停止加工。我为此使用了一个名为sidebar.html的单独文件。我的侧边栏的可打开的pannels不工作,当我使它动态通用的所有页

我使用这段代码来制作所有页面通用的侧边栏。

<script> 
$(document).ready(function(){ 
    $("#sidebar").load("sidebar.html"); 
    $("#footer").load("footer.html"); 
    }); 
</script> 

这是我的引导边栏代码

<aside class="main-sidebar"> 
    <section class="sidebar"> 
     <ul class="sidebar-menu" > 
      <li class="active treeview"> 
       <a href="#"> 
        <i class="fa fa-globe"></i> <span>Regions</span> 
       </a> 
       <ul class="treeview-menu"> 
        <li class="active"><a href="index.html" class=""><i class="fa fa-stop"></i> Americas</a></li> 
        <li><a href="index2.html"><i class="fa fa-stop"></i> Europe</a></li> 
        <li ><a href="index.html"><i class="fa fa-stop"></i> Eurasia</a></li> 
        <li><a href="index2.html"><i class="fa fa-stop"></i> Sub-Saharan Africa</a></li> 
        <li ><a href="index.html"><i class="fa fa-stop"></i> Asian-Pacific</a></li> 
        <li><a href="index2.html"><i class="fa fa-stop"></i> Middle East</a></li> 
        <li><a href="index2.html"><i class="fa fa-stop"></i> North Africa</a></li> 
        <li class="gray-li" > 
         <form action="#" method="get" class="sidebar-form" > 
          <div class="input-group" > 
           <input type="text" class="form-control " placeholder="Search for a country"> 
            <span class="input-group-btn"> 
             <button type="submit" name="search" id="Button1" class="btn btn-flat"><i class="fa fa-search"></i> 
             </button> 
            </span> 
          </div> 
         </form> 
        </li> 
       </ul> 
      </li> 
      <li class="treeview"> 
       <a onclick="javascript:location.href='page-7.html'" > 
        <img src="img/group_icon.png"/> 
        <span >Institutions</span> 
       </a> 
       <ul class="treeview-menu"> 
        <li class="active"><a href="page-7.html" class=""><i class="fa fa-stop"></i> Americas</a></li> 
        <li><a href="index2.html"><i class="fa fa-stop"></i> Europe</a></li> 
        <li ><a href="index.html"><i class="fa fa-stop"></i> Eurasia</a></li> 
        <li><a href="index2.html"><i class="fa fa-stop"></i> Sub-Saharan Africa</a></li> 
        <li ><a href="index.html"><i class="fa fa-stop"></i> Asian-Pacific</a></li> 
        <li><a href="index2.html"><i class="fa fa-stop"></i> Middle East</a></li> 
        <li><a href="index2.html"><i class="fa fa-stop"></i> North Africa</a></li> 
        <li class="gray-li"> 
         <form action="#" method="get" class="sidebar-form"> 
          <div class="input-group" > 
           <input type="text" name="q" class="form-control" placeholder="Search for a country"> 
            <span class="input-group-btn"> 
             <button type="submit" name="search" id="Button2" class="btn btn-flat"><i class="fa fa-search"></i> 
             </button> 
            </span> 
          </div> 
         </form> 
        </li> 
       </ul> 
      </li> 
      <li class="treeview"> 
       <a href="#"> 
        <i class="fa fa-line-chart"></i> 
        <span>Comparations</span> 
       </a> 
       <ul class="treeview-menu"> 
        <li><a onclick="javascript:location.href='page-11.html'" ><i class="fa fa-stop"></i>Por Pa&iacute;s</a></li> 
        <li><a onclick="javascript:location.href='page-13.html'"><i class="fa fa-stop"></i> Cluster</a></li> 
       </ul> 
      </li> 
     </ul> 
    </section> 
</aside> 

你正在使用类,所以试试这个:

$(document).ready(function(){ 
    $(".sidebar").load("sidebar.html"); 
    $(".footer").load("footer.html"); 
});