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

Posted 2023-05-08

【中文标题】JQuery隐藏可折叠菜单点击其他任何地方 - 模糊 -

【英文标题】：JQuery hide collapsable menu clicking anywhere else - blur -

【发布时间】：2018-11-26 10:11:27

【问题描述】：

设置此 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');
        
      );
);

【问题讨论】：

你使用什么版本的引导程序？

我使用 Bootstrap 4 :)

【参考方案1】：

为什么要使用按钮模糊， 你只能通过$(document).on("click",function(e) ... )实现它

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

参见下面的 sn-p ：

$(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>