Question

我正在使用Bootstrap开展一个小项目，但我遇到了一个奇怪的问题。

基本上，我有两个项目的菜单，第一个在div中加载另一个页面，第二个触发下拉菜单。

问题是如果我在浏览器上运行文件后立即点击第一项，下拉列表将停止工作，直到我再次点击第一项。

如果我先点击第二项，下拉列表也会停止工作，直到我点击第一项。

以下是代码：

＆＃13;

$('#usuarios').click(function() {
  $('#main').load('cns_usuarios.html');
});

$('#canal').click(function() {
  $('#main').load('canal.html');
});

$('#campos').click(function() {
  $('#main').load('cns_campos.html');
});

＆＃13;

<link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css' rel='stylesheet'>
<link href='index.css' rel='stylesheet'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js'></script>

<ul class='breadcrumb menu'>
  <li id='usuarios'><a href='#'>Listar Usuários</a>
  </li>

  <li class='dropdown'>
    <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
      Configurações
      <span class = 'caret'></span>
    </a>

    <ul class='dropdown-menu'>
      <li id='canal'><a href='#'>Canal</a>
      </li>
      <li id='campos'><a href='#'>Campos</a>
      </li>
    </ul>
  </li>

  <li><a href='../index.html'>Sair</a>
  </li>
</ul>

<div id='main' class='main'>
</div>

＆＃13;

代码包含一些葡萄牙语的东西，但它几乎无关紧要，所以请忽略它。

另外，我添加了一些我自己的东西，但仅限于css方面。如果有人认为这可能导致我的问题，我也会显示部分代码。

Answer 1

试试这个：

<script>
    $(document).on('click', '#usuarios', function() {
        $('#main').load('cns_usuarios.html');
    });

    $(document).on('click', '#canal', function() {
        $('#main').load('canal.html');
    });

    $(document).on('click', '#campos', function() {
        $('#main').load('cns_campos.html');
    });

</script>

Bootstrap下拉菜单无法正常运行

1 个答案: