javascript - 我的搜索框似乎不喜欢我的覆盖

Question

有问题的页面:https://www.harpercollege.edu/library/index.php

我有一个网站，我正在为其创建一个新的移动导航，除了搜索输入字段外，一切都运行良好。搜索按钮不会导致任何问题，但输入框会触发覆盖切换关闭。我曾尝试使用 Z-Index 值，认为这是原因，但没有效果。它在某一时刻工作正常，当我回去设计覆盖层时，它现在已经坏了。

此外 - 此叠加层仅以 900 像素或更小的宽度显示。

$(document).ready(function() {
  $(".button a").click(function() {
    $(".overlay").fadeToggle(200);
    $(this).toggleClass('btn-open').toggleClass('btn-close');
  });
});
$('.overlay').on('click', function() {
  $(".overlay").fadeToggle(200);
  $(".button a").toggleClass('btn-open').toggleClass('btn-close');
  open = false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay" style="display: block;">
  <div class="wrap">
    <div class="search-box-mobile">
      <form id="cse-search-box" class="navbar-search" action="https://www.harpercollege.edu/search/index.php" method="get" enctype="application/x-www-form-urlencoded" role="search">
        <label class="sr-only" for="q">Search</label>
        <input id="q" class="search-query" title="Search Harper College" placeholder="Search Harper College" type="text" name="q"><button type="submit" class="btn btn-default">
                        	<span class="fa fa-search"></span></button>
      </form>
    </div>
    <ul class="wrap-nav">
      <li><a href="#">Quick Links</a>
        <ul>
          <li><a href="/index.php">Home</a></li>
          <li><a href="https://myharper.harpercollege.edu">MyHarper</a></li>
          <li><a href="https://harper.blackboard.com/webapps/login/">Blackboard</a></li>
          <li><a href="http://events.harpercollege.edu/">Calendar</a></li>
          <li><a href="http://dept.harpercollege.edu/library/">Library</a></li>
          <li><a href="https://hip.harpercollege.edu/">Faculty &amp; Staff</a></li>
          <li><a href="/about/contactus.php">Contact Us</a></li>
        </ul>
      </li>
      <li><a href="/library/services/index.php">Services</a>
        <ul>
          <li><a href="/library/services/plagiarism.php">Plagiarism</a></li>
          <li><a href="/library/services/forms/index.php">Forms</a>
          </li>
          <li><a href="/library/services/workshops.php">Workshops</a></li>
          <li><a href="/library/services/tutorials.php">Tutorials</a></li>
          <li><a href="/library/services/copyright.php">Copyright &amp; Fair Use</a></li>
          <li><a href="/library/services/faculty/index.php">Faculty &amp; Staff</a></li>
          <li><a href="/library/services/district-borrowers.php">District Residents</a></li>
        </ul>
      </li>
      <li><a href="/library/research/index.php">RESEARCH</a>
        <ul>
          <li><a href="https://vufind.carli.illinois.edu/vf-wrh/">Catalog</a></li>
          <li><a href="http://libguides.harpercollege.edu/az.php">Databases</a></li>
          <li><a href="http://libguides.harpercollege.edu/srch.php">Research Guides</a></li>
          <li><a href="/library/research/other-libraries.php">Other Libraries</a></li>
        </ul>
      </li>
      <li><a href="/library/faqs/index.php">FAQS</a></li>
      <li><a href="/library/archives/index.php">ARCHIVES</a>
        <ul>
          <li><a href="/library/archives/donate.php">Archive Donation Form</a></li>
        </ul>
      </li>
      <li><a href="/library/about/index.php">ABOUT</a>
        <ul>
          <li><a href="/library/about/mission.php">Library Mission</a></li>
          <li><a href="/library/about/policies/index.php">Library Policies</a></li>
          <li><a href="/library/about/directory/index.php">Directory</a></li>
          <li><a href="/library/about/hours.php">Hours / Location</a></li>
          <li><a href="http://libguides.harpercollege.edu/LCCReadingRoom">LCC Reading Room</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

你在 custom.min.js 中有这段代码导致覆盖关闭

$('.overlay').on('click', function(){
    $(".overlay").fadeToggle(200);   
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
});

来自输入的点击事件冒泡并由此处理程序处理。 您可以尝试通过 event.target 查看点击了什么元素，或者您可以更改关闭叠加层的功能。

注意:我通过为您的覆盖创建 DOM 断点(中断 -> 属性修改)找到了上面的代码