Question

我想在菜单外单击时关闭菜单覆盖。

我使用的脚本是：

jQuery('html').click(function(event) {
    if ($(event.target).closest('.widget-area, .widget-area-visible').length === 0) {
        $('#secondary').hide();
    }
});

它显示TypeError：$不是函数

这是我的测试站点：http://elysiumit.com/carinaenew/

请帮助，我是jQuery新手。

这是HTML：

<div id="secondary" class="widget-area widget-area-visible" role="complementary">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="menu-slideoverlaymenu-container">
          <ul id="primary-menu" class="menu">
           <li id="menu-item-126" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-126"><a href="#">Home</a></li>
          <li id="menu-item-124"><a href="#">Welcome</a></li>
          <li id="menu-item-125"><a href="#">About Us</a></li>
          <li id="menu-item-123"><a href="#">Renewable Energy</a></li>
          <li id="menu-item-122"><a href="#">Radio Solutions</a></li>
          <li id="menu-item-120"><a href="#">Realtors and Property Development</a></li>
          <li id="menu-item-282""><a href="#">Our Clients</a></li>
         </ul>
      </div>
    </nav>
</div>

Answer 1

由于jQuery有效，但是$由于某些原因而无效，因此您可以将$的所有实例替换为jQuery：

jQuery('html').click(function(event) {
  if (jQuery(event.target).closest('.widget-area, .widget-area-visible').length === 0) {
    jQuery('#secondary').hide();
  }
});

或者，如果您更喜欢使用$，则可以将整个内容放入IIFE，其参数$指向jQuery：

(function($) {
  $('html').click(function(event) {
    if ($(event.target).closest('.widget-area, .widget-area-visible').length === 0) {
      $('#secondary').hide();
    }
  });
})(jQuery);

一旦修复，在菜单外单击时，您的#secondary似乎已正确隐藏：

(($) => {
  $('html').click(function(event) {
    if ($(event.target).closest('.widget-area, .widget-area-visible').length === 0) {
      $('#secondary').hide();
    }
  });
})(jQuery);

#secondary {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="secondary" class="widget-area widget-area-visible" role="complementary">
  <nav id="site-navigation" class="main-navigation" role="navigation">
    <div class="menu-slideoverlaymenu-container">
      <ul id="primary-menu" class="menu">
        <li id="menu-item-126" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-126"><a href="#">Home</a></li>
        <li id="menu-item-124"><a href="#">Welcome</a></li>
        <li id="menu-item-125"><a href="#">About Us</a></li>
        <li id="menu-item-123"><a href="#">Renewable Energy</a></li>
        <li id="menu-item-122"><a href="#">Radio Solutions</a></li>
        <li id="menu-item-120"><a href="#">Realtors and Property Development</a></li>
        <li id="menu-item-282"><a href="#">Our Clients</a></li>
      </ul>
    </div>
  </nav>
</div>
content outside of menu

Answer 2

默认情况下，当您将jQuery放入Wordpress中时，必须使用jQuery，并且不使用$（这是为了与其他库兼容）。

您将其包装在function中的解决方案可以很好地工作，或者您可以通过其他方式加载jQuery（但这在Wordpress中可能不是一个好主意）。

如果必须使用document.ready，则实际上可以将$传递给函数调用：

jQuery(function ($) {
  $('html').click(function(event) {
  if ($(event.target).closest('.widget-area, .widget-area-visible').length === 0){
     $('#secondary').hide();
   }
 });
});

请更正此jQuery脚本

2 个答案: