2015-10-19 4 views

ответ

0

Попробуйте следующий код,

Ваше добавление каждую часть по отдельности, а не вы должны добавить их раз

$(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>

+0

OMG! спасибо jlocker –

+0

@BernardoBorunda приветствую вас .. – jlocker

0

Проблема вы все добавления кода на # 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); 
}); 
Смежные вопросы