リンクをクリックするとドロップダウンメニューを閉じます（ブートストラップ）

Question

メニュー内のリンクをクリックした後にDropMenu（モバイルクエリ内）を閉じ、アイコンが自分の位置に留まり、liのリストの下に移動しないようにします。

これは私のHTMLコードです：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
<a id="icono" href="http://www.facebook.com/clenslimpieza" target="_blank"> 
    <i class="fa facebook fa-facebook-square fa-3x" aria-hidden="true"></i> 
</a> 
<ul class="nav navbar-nav" id="dropdownClick"> 
    <li><a href="#inicio">Inicio</a></li> 
    <li><a href="#quees">¿Qué es?</a></li> 
    <li><a href="#porque">¿Por qué?</a></li> 
    <li><a href="#servicios">Servicios</a></li> 
    <li><a href="#testimonios">Testimonios</a></li> 
    <li><a href="#equipo">Equipo</a></li> 
    <li><a href="#contactenos">Contactenos</a></li> 
    <li class="dropdownIcon"><a href="javascript:void(0);" 
    onclick="dropdownMenu()"><i class="fa fa-bars fa-2x" aria-hidden="true"> 
    </i></a></li> 
</ul> 

これは、スクリプトコードです：

<script> 
function dropdownMenu() { 
    var x = document.getElementById("dropdownClick"); 
    if (x.className === "nav navbar-nav") { 
    x.className += "responsive"; 
    } else { 
    x.className = "nav navbar-nav"; 
    } 
}; 
</script> 

これは私のCSSコードです：

@media only screen and (max-width: 767px) { 
#equipo { 
height: auto; 
} 

.navbar-nav li:not(:nth-child(8)) { 
display: none; 
} 

ul.nav li.dropdownIcon { 
    float: right; 
    display: block; 
} 

ul.nav.responsive li.dropdownIcon { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

ul.nav.responsive { 
    position: relative; 
} 

ul.nav.responsive li { 
    display: inline; 
    float: none; 
} 

ul.nav.responsive li a { 
    display: block; 
    text-align: left; 
} 
} 

Answer 1

これがちょうどです1つのオプション！

function dropdownMenu() { 
 
var x = document.getElementById("dropdownClick"); 
 
if (x.className === "nav navbar-nav") { 
 
    x.className += "responsive"; 
 
} else { 
 
    x.className = "nav navbar-nav"; 
 
} 
 

 

 
} 
 
$(".dropdown-menu a").click(function() { 
 
    $(this).closest(".dropdown-menu").prev().dropdown("toggle"); 
 
}); 
 
$('#dropdownClick li a').click(function(){ 
 
$(this).closest('nav.navbar').find('.navbar-navresponsive').addClass('nav navbar-nav').toggleClass('navbar-navresponsive'); 
 
})

@media only screen and (max-width: 767px) { 
 
#equipo { 
 
height: auto; 
 
} 
 

 
.navbar-nav li:not(:nth-child(8)) { 
 
display: none; 
 
} 
 

 
ul.nav li.dropdownIcon { 
 
    float: right; 
 
    display: block; 
 
} 
 

 
ul.nav.responsive li.dropdownIcon { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 

 
ul.nav.responsive { 
 
    position: relative; 
 
} 
 

 
ul.nav.responsive li { 
 
    display: inline; 
 
    float: none; 
 
} 
 

 
ul.nav.responsive li a { 
 
    display: block; 
 
    text-align: left; 
 
} 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
<a id="icono" href="http://www.facebook.com/clenslimpieza" target="_blank"> 
 
    <i class="fa facebook fa-facebook-square fa-3x" aria-hidden="true"></i> 
 
</a> 
 
<ul class="pull-right"> 
 
<li class="dropdownIcon"><a href="javascript:void(0);" 
 
    onclick="dropdownMenu()"><i class="fa fa-bars fa-2x" aria-hidden="true"> 
 
    </i></a></li></ul> 
 
<ul class="nav navbar-nav" id="dropdownClick"> 
 
    <li><a href="#inicio">Inicio</a></li> 
 
    <li><a href="#quees">¿Qué es?</a></li> 
 
    <li><a href="#porque">¿Por qué?</a></li> 
 
    <li><a href="#servicios">Servicios</a></li> 
 
    <li><a href="#testimonios">Testimonios</a></li> 
 
    <li><a href="#equipo">Equipo</a></li> 
 
    <li><a href="#contactenos">Contactenos</a></li> 
 
    
 
</ul> 
 
</nav>