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

这只是一个选择！

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>

单击链接后关闭DropDown菜单（Bootstrap）

1 个答案: