Javascript 单击链接后关闭下拉菜单（引导）

我希望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>

---

这只是一个选择

函数下拉菜单（）{
var x=document.getElementById（“下拉单击”）；
如果（x.className==“导航栏导航”）{
x、 类名+=“响应”；
}否则{
x、 className=“导航栏导航”；
}
}
$（“.下拉菜单a”）。单击（函数（）{
$（this）.closest（“.dropdown menu”）.prev（）.dropdown（“切换”）；
});
$（“#下拉单击li a”）。单击（函数（）{
$（this）.closest（'nav.navbar'）。find（'.navbar navresponsive'）。addClass（'nav navbar nav'）。toggleClass（'navbar-navresponsive'）；
})

@仅媒体屏幕和（最大宽度：767px）{
#装备{
高度：自动；
}
.导航栏导航李：非（：第n个孩子（8））{
显示：无；
} 
ul.nav li.dropdownCon{
浮动：对；
显示：块；
}
ul.nav.responsive li.dropdownCon{
位置：绝对位置；
排名：0；
右：0；
}
ul.nav.responsive{
位置：相对位置；
}
ul.nav.li{
显示：内联；
浮动：无；
}
ul.nav.lia{
显示：块；
文本对齐：左对齐；
}
}

谢谢，这固定了位置，但您知道当我单击列表项时如何关闭下拉列表吗？我做了一些更改，请查看。

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

@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;
}
}