JQuery 隐藏可折叠菜单点击其他地方 - 模糊 -

Question

设置此 JQuery 函数无法正常工作。有时，如果我单击元素，什么也没有发生，并且它会触发隐藏可折叠菜单的功能，如果单击文档上的任意位置，则不会重定向到正确的 href。有什么更好的方法吗？

HTML

    <div>
      <button id="bottone" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav " aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about_me">About Me</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#services">Services</a>
      </li>
            <li class="nav-item">
        <a class="nav-link" href="contacts.php">Contacts</a>
      </li>
    </ul>
    </div>
  </div>

JQuery

$(document).ready(function () {

      $("#bottone").blur(function (event) {
        var screenWidth = window.innerWidth;
        if (screenWidth < 768) {
          $("#navbarNav").collapse('hide');
        }
      });
});

Answer 1

为什么要使用按钮模糊，您只能通过 $(document).on("click",function(e){ ... })

实现它

这将切换菜单显示，当链接没有 anchor 时也允许重定向。

请看下面的片段:

$(document).ready(function() {
 
 $(document).on("click",function(e){
    var screenWidth = window.innerWidth;
    if (screenWidth < 768) {
      $("#navbarNav").collapse('hide');
    }
 });

});

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>


<div>
  <button id="bottone" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav " aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about_me">About Me</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#services">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-" href="/contacts.php">Contacts</a>
      </li>
    </ul>
  </div>
</div>