Question

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

我有一个网站，我正在创建一个新的移动导航，除搜索输入字段外，一切都运行良好。 “搜索”按钮不会产生任何问题，但输入框会触发叠加以切换关闭。我曾尝试使用Z-Index值来考虑原因，但它没有效果。它在某一点上正常工作，当我回到造型时，它现在已经破碎了。

此外 - 此叠加层仅以900px或更低的宽度显示。

＆＃13;

$(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;
});

＆＃13;

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

＆＃13;

Answer 1

您在custom.min.js中有此代码导致叠加层关闭

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

从输入气泡中点击事件并从此处理程序处理。您可以尝试通过event.target查看哪些元素是clicket，或者您可以更改关闭叠加层的功能。

注意：我通过为您的叠加创建DOM断点找到了上述代码（中断 - ＆gt;属性修改）

Answer 2

你有一个jQuery事件处理程序，用于覆盖内的任何点击：

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

由于输入框位于.overlay内，因此click事件将冒泡到该处理程序。如果您不希望这种情况发生，您需要为输入框单击设置事件处理程序，以取消事件传播或在单击处理程序中检查事件的目标。以下是如何做到后者：

$('.overlay').on('click', function(e) {
    if (e.target.tagName.toLowerCase() === 'input') {
      return;
    }

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

Answer 3

这是你的问题：

([Month Number] >= ${Property}-3 and [Month Number] <= ${Property}).

每次点击＆＃34;按钮＆＃34;它都会激活。所以无论如何都要打开和关闭。如果你可以把它放到jsfiddle.net中，我会为你做一个解决方法。

我的搜索框似乎不喜欢我的叠加层

3 个答案: