Question

当我动态地向导航栏添加元素时，会丢失css格式。我尝试使用.navbar但不行，请帮助我，看看jsfiddle。

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

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

Answer 1

问题是您是否将所有代码附加到＃navBar1（包括锚点）。实际上锚应该附加到li上。

如果您将所有内容附加为一个字符串，它将起作用。

$(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);
});

Answer 2

尝试以下代码，

您需要单独附加每个部分，而不是将其添加一次

＆＃13;

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

＆＃13;

<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">	<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>	<a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            APPLICATIONS <b class="caret"></b>
						</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>

＆＃13;

我如何刷新bootstrap导航栏？

2 个答案: