下拉菜單不工作後，包括在一個div

-1

我的主頁上有下拉菜單，但如果我把頭div放入另一個html文件，之後如果我使用jquery加載函數將其包含在我的主頁中比下拉菜單不起作用。下拉菜單不工作後，包括在一個div

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="css/style.css"/> 
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/> 
<link rel="stylesheet" type="text/css" href="css/component.css" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> 
</head> 
    <body> 
     <div id="myid"> 

     </div> 
<script> 
    $(function(){ 
     $("#myid").load("header.html"); 
    }); 
    </script> 


    <script src="js/cbpHorizontalMenu.js"></script> 
    <script> 
      $(function() { 
       cbpHorizontalMenu.init(); 
       cbpHorizontalMenu1.init(); 
      }); 
     </script> 


</body> 
</html>

*****頭內容*****

<header class="header"> 
      <div class="layout"> 
       <div class="top-header"> 

         <div class="top-right">       
          <div class="nav-toggler"> 
           <button class="toggle-link hidden-bar-opener" data-pixel=".top-menu">Top Menu</button> 
          </div> 

          <div class="layout">        
          <div class="top-menu cbp-hrmenu1">       
           <ul> 
            <li><a href="#"><span class="fa fa-plus"></span> Our Services</a> 
             <div class="service-drop cbp-hrsub"> 
              <div class="cbp-hrsub-inner">            
                <ul> 
                 <li><a href="#">football</a></li> 
                 <li><a href="#">cricket</a></li> 
                 <li><a href="#">hockey</a></li> 
                </ul> 
              </div>        
             </div>        
            </li>        



            <li> 
             <a href="#"><span class="fa fa-plus"></span> Contact Us</a>         
             <div class="service-drop cbp-hrsub"> 
              <div class="cbp-hrsub-inner"> 
               <ul> 
                <li><a href="#"><i class="fa fa-phone-square" aria-hidden="true"></i> +91-99863355333</a></li> 
                <li><a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i> +91-124382428</a></li> 
                <li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i> skype</a></li> 
                <li><a href="#"><i class="fa fa-envelope" aria-hidden="true">mail me </i></a></li> 
               </ul> 
              </div> 
             </div> 
            </li> 
           </ul> 

          </div> 
          </div> 
         </div> 


       </div>   

      </div>   

      <div class="main-menu"> 
       <div class="layout"> 

       <div class="nav-toggler"> 
         <button class="toggle-link hidden-bar-opener" data-pixel=".main-menu1"><i class="fa fa-bars"></i></button> 
       </div> 
       <nav class="main-menu1 cbp-hrmenu"> 
        <ul> 



         <li> 
          <a href="#">Category one</a> 
          <div class="cbp-hrsub"> 
           <div class="cbp-hrsub-inner"> 
            <div> 

             <ul> 
              <li><a href="#">test </a></li> 
              <li><a href="#">test </a></li> 
              <li><a href="#">test </a></li> 

              <li><a href="#">test </a></li> 
              <li><a href="#">test</a></li> 
             </ul> 
            </div> 


           </div><!-- /cbp-hrsub-inner --> 
          </div><!-- /cbp-hrsub --> 
         </li> 

         <li> 
          <a href="#">Category two</a> 
          <div class="cbp-hrsub"> 
           <div class="cbp-hrsub-inner"> 
            <div> 

             <ul> 
              <li><a href="#">test 2</a></li> 
              <li><a href="#">test 2</a></li> 
              <li><a href="#">test 2</a></li> 

              <li><a href="#">test 2</a></li> 
              <li><a href="#">test 2</a></li> 
             </ul> 
            </div> 


           </div><!-- /cbp-hrsub-inner --> 
          </div><!-- /cbp-hrsub --> 
         </li> 




        </ul> 
       </nav> 
       </div> 
      </div> 

</header>

如果我頭的內容複製在div比它工作正常。但我想將其包含在我的網站的每個頁面上。

這裏是活生生的例子http://plnkr.co/edit/51vGFoI7aJF1HUE3Wim9

來源

2016-08-05 Harsh sachdev

小提琴的例子會更好 –

嘗試通過添加小提琴或codepen使代碼正確..謝謝！ – vignesh

的問題是，因爲內容是異步加載，並嘗試一個初始化菜單它在DOM前。您需要將初始化放在load()的回調中。試試這個：

<head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"/> 
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/> 
    <link rel="stylesheet" type="text/css" href="css/component.css" /> 

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> 
    <script src="js/cbpHorizontalMenu.js"></script> 
    <script> 
     $(function(){ 
      $("#myid").load("header.html", function() { 
       cbpHorizontalMenu.init(); 
       cbpHorizontalMenu1.init(); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="myid"></div> 
</body>

來源

2016-08-05 11:08:57

感謝您的評論。蹦牀鏈接已添加。 –

不幸的是，這不適合我。 –

，如果它在PHP中，你可以將其命名爲喜歡的header.php

2.然後包括它<? include('header.php'); ?> 把該行的代碼在頂部或者div的你想

來源

2016-08-05 11:10:20 LecheDeCrema

不，它不是PHP。該網站是在angularJS，但在這裏我使用簡單的JQuery –

下拉菜單不工作後，包括在一個div

回答

相關問題