我如何刷新bootstrap導航欄？

-1

當我動態地向navbar添加一個元素時，這會丟失css格式。我試圖使用.navbar但不行，請幫助我，看到jsfiddle。我如何刷新bootstrap導航欄？

$('#navBar1').navbar();

http://jsfiddle.net/BernardoBJ/y14ss9s6/

來源

2015-10-19 Alfonso Jaquez

嘗試下面的代碼，

你分別追加各部分，而不是你應該添加他們一次

$(document).ready(function() { 
 
    $('#MainMenu').append('<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Reports</a></li>'); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<body> 
 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navBar1"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> \t <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav" id="MainMenu"> 
 
      <li> \t <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
 
          APPLICATIONS <b class="caret"></b> 
 
\t \t \t \t \t \t </a> 
 

 
      <ul class="dropdown-menu multi-level"> 
 
       <li><a href="#" class="dropdown-toggle" data- toggle="dropdown">Submenu</a> 
 

 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
</body>

OMG！

來源

2015-10-19 16:23:00 jlocker

謝謝你jlocker –

@BernardoBorunda你的歡迎。 – jlocker

問題是你所有的代碼追加到＃navBar1包括錨。錨點實際上應該附加到李。

如果將所有內容作爲一個字符串添加，它將起作用。

$(document).ready(function(){  
    $('#MainMenu').append('<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Reports</a></li>'); 
});

如果你需要像你目前正在做的一樣一步一步做。嘗試這樣的事情... http://jsfiddle.net/y14ss9s6/1/

的jQuery：

$(document).ready(function() { 
    var $li = $('<li />'); 
    var $a = $('<a />', { 
     href: "#", 
     class: "dropdown-toggle", 
     html: 'Reports' 
    }); 
    $li.append($a); 
    $('#MainMenu').append($li); 
});

來源

2015-10-19 16:15:26

我如何刷新bootstrap導航欄？

回答

相關問題