Javascript 单击时隐藏导航栏_Javascript_Html_Jquery

Javascript 单击时隐藏导航栏

javascript html jquery

Javascript 单击时隐藏导航栏,javascript,html,jquery,Javascript,Html,Jquery,单击链接后，我无法隐藏导航栏。我用的是bootstrap3。我已经添加了应该可以工作的脚本。我找不到错误。有人能通过这个密码吗。请 $（'.navbar collapse ul li a'）。单击（函数（）{ $（“.navbar collapse”）.collapse（'hide'）； }); 切换导航您是否尝试过这样的方法： <!DOCTYPE html> <html lang="en"> <head> <title

单击链接后，我无法隐藏导航栏。我用的是bootstrap3。我已经添加了应该可以工作的脚本。我找不到错误。有人能通过这个密码吗。请

$（'.navbar collapse ul li a'）。单击（函数（）{
$（“.navbar collapse”）.collapse（'hide'）；
});

切换导航












您是否尝试过这样的方法：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span> 
    About Us</a>
      </li>
      <li class="nav-link" class="nav-item">
        <a class="nav-link" href="#"><span class="glyphicon glyphicon-picture"></span> 
    Gallery</a>
      </li>
      <li class="nav-item">
        <a class="nav-link"  href="#"><span class="glyphicon glyphicon-pawn"></span> Awards</a>
      </li>    
    </ul>
  </div>  
</nav>
<br>
</body>
</html>


引导示例










您是否尝试过这样的方法：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span> 
    About Us</a>
      </li>
      <li class="nav-link" class="nav-item">
        <a class="nav-link" href="#"><span class="glyphicon glyphicon-picture"></span> 
    Gallery</a>
      </li>
      <li class="nav-item">
        <a class="nav-link"  href="#"><span class="glyphicon glyphicon-pawn"></span> Awards</a>
      </li>    
    </ul>
  </div>  
</nav>
<br>
</body>
</html>


引导示例










在js中使用此选项
$(function () {

  $(".navbar-collapse ul li a").click(function() {
  $(".navbar-collapse").collapse('hide');
  });
  $(".navbar-collapse ul li a").click(function (event) {
    $(event.target).focus();
  });
});

在js中使用这个
$(function () {

  $(".navbar-collapse ul li a").click(function() {
  $(".navbar-collapse").collapse('hide');
  });
  $(".navbar-collapse ul li a").click(function (event) {
    $(event.target).focus();
  });
});


.折叠隐藏内容
。在转换期间应用折叠
.collapse.in显示内容
但这还不够
单击链接后，我无法隐藏导航栏
您想隐藏整个导航栏还是显示在小屏幕上的菜单部分
如果您想要第一个，您必须将类放入nav
标记中，并在jquery中使用不同的查询
示例

$（函数（）{
$（'.navbar-a'）。单击（函数（）{
$（“.navbar collapse”）.collapse（'hide'）；//在较低的屏幕上隐藏菜单
//$（“.navbar”）.collapse（'hide'）；//隐藏整个navbar
});
})
html，
身体{
身高：100%；
框大小：边框框；
}

切换导航













.折叠隐藏内容
。在转换期间应用折叠
.collapse.in显示内容
但这还不够
单击链接后，我无法隐藏导航栏
您想隐藏整个导航栏还是显示在小屏幕上的菜单部分
如果您想要第一个，您必须将类放入nav
标记中，并在jquery中使用不同的查询
示例

$（函数（）{
$（'.navbar-a'）。单击（函数（）{
$（“.navbar collapse”）.collapse（'hide'）；//在较低的屏幕上隐藏菜单
//$（“.navbar”）.collapse（'hide'）；//隐藏整个navbar
});
})
html，
身体{
身高：100%；
框大小：边框框；
}

切换导航












似乎工作正常。似乎工作正常。