javascript - 切换折叠菜单始终打开

Question

当我点击按钮时，切换打开菜单，但是当我第二次点击菜单时，菜单没有关闭...有什么想法吗？抱歉，这是我第一次访问这个网站!

<nav class="navbar navbar-default navbar-fixed-top gradient" role="navigation" >
  <div class="navbar-header" >
    <!-- Navbar visualizzata su dispositivi mobili-->
     <button class="navbar-toggle collapsed" data-target="#prova" data-toggle="collapse" type="button">
      <span class="sr-only" >Menu di navigazione</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </button>

     <!-- Navbar-brand visualizzata in alto a sinistra-->
     <!-- Indica la sezione del "titolo". href indica il link sul titolo. Color fa               riferimento al titolo. -->
     <a class="navbar-brand gradient text-navbar" href="index.html">Annotaria
     <!--Icona medicina -->
     <img src="http://www.notizieprovita.it/wp-content/uploads/2013/05/farmacisti_obiezione-di-coscienza_pillola-del-giorno-dopo.jpg" height="100%"/></a>
     </div> <!--Chiuso il div della navbar-header -->



     <div class="nav navbar-collapse collapse  gradient" id="prova" >
     <ul class=" nav navbar-nav" >
     <!--About sessione. data-target fa fronte a cosa caricheremo una volta attivato il modale. -->
        <li><a data-target="#about" data-toggle="modal" role="button" href="#" class="text-navbar">About</a></li>
        <!--Annotazioni non salvate navbar -->
        <li><a id="temp_annot_button" data-target="#temp_annot" data-toggle="modal" role="button" class="text-navbar hide">Annotazioni non salvate</a></li>
        <!--Crea Annotazioni navbar -->
        <li><a id="create_ranged_annot_button" onclick='lightText()' data-target="#doc_annot" data-toggle="modal" role="button" class="text-navbar  hide">Crea annotazioni</a></li>
        <!--Annotator Mode -->
        <li><a id="annotatorPanel" data-toggle="modal" onclick="togliModale()" data-target="#loginModal" role="button" class="text-navbar">Annotator Mode</a></li>
        <!--Help-->
        <li><a data-target="#help" data-toggle="modal" role="button" href="#" class= "text-navbar">Help</a></li>
       </ul>
   </div>
</nav>  <!--Chiudo la definizione della nostra navbar -->

posto il codice javascript che ho inserito!

<!--javascript code -->
<script language="javascript"> 
    function lightText() {                               //funzione che memorizza il testo selezionato
        var testoevidenziato= window.getSelection();
        alert (testoevidenziato.toString());
    }

    function togliModale(){                             //rimuove l'attributo data-dismiss
        $('#login').removeAttr('data-dismiss')
    }
</script>

Answer 1

找到解决方案!

您已经包含了两次 Bootstrap 。如果您删除其中一个包含它的作品。此外，您已经多次包含了多个版本的 jquery。你真的不应该这样做，因为这会导致重大问题!

在您的 HTML 头部，您有以下 jquery 包含:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

在你的 body 里，你有:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"> </script>

理想情况下，您应该删除头部的 include，只使用底部的 include你的 body 。最终，您希望它在体内尽可能低:

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">

我已经更新了你的 JSFiddle 通过这些更改，您可以看到它现在可以正常工作了。