切换折叠菜单始终打开

Toggle-collapse menu always open

本文关键字：菜单 折叠      更新时间：2023-09-26

当我点击按钮时，切换打开menú，但当我点击第二次菜单时，不会关闭。。。知道吗？对不起，这是我第一次在这个网站上！

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

找到了解决方案！

您已经两次包含bootstrap。如果删除其中一个include，它会起作用。此外，您已经多次包含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>

在你的身体里，你有以下几种：

<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你的身体。最终，你希望这个在体内尽可能低：

<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，您可以看到它现在可以工作了。

相关文章：