jquery - 新添加的类上的单击功能未运行

问题描述

我正在寻找向products-active按钮添加一个类以显示菜单已打开（显示在第一次单击功能中）。那部分工作正常。

单击该新类时，我想运行其他一些代码（在代码段的底部）。目前它似乎没有做任何事情，我哪里出错了？代码中似乎存在一些冲突。

请注意，当单击特定菜单项时，这会创建一个下拉列表。然后，当单击箭头或页面上的任何其他位置时，它会向上滚动菜单。

这是我的 javascript 和 html：

// Product menu dropdown
$("#menu-item-2003 ul").append("<li class='product-up'><a href='#'></a></li>");
$("#menu-item-2003 > a").removeAttr('href');
$("#menu-item-2003 a").click(function() {
  $("#menu-item-2003 a").addClass("products-active");
  $("#menu-item-2002 ul").slideUp("slow", function() {
    // Animation complete.
  });
  $("#menu-item-2003 ul").slideDown("slow", function() {
    // Animation complete.
  });
});

$(".product-up").click(function() {
  $("#menu-item-2003 ul").slideUp("slow", function() {
    $("#menu-item-2003 a").removeClass("products-active");
  });
});

// Click anywhere but on the menu closes it.
$(document).click(function(e) {
  // Check if click was triggered on or within #menu_content
  if (!$(e.target).closest("#menu_content, #menu-item-2003 a, #menu-item-2003 ul li a").length) {

    $("#menu-item-2003 ul").slideUp("slow", function() {
      $("#menu-item-2003 a").removeClass("products-active");
    });
  }
});

$(".products-active").click(function() {
  $("#menu-item-2003 ul").slideUp("slow", function() {

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div class="menu-primary-menu-container">
    <ul class="primary-menu-1">
      <li id="menu-item-2004" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home"><a href="http://site.local/" class="menu-image-title-after"><span class="menu-image-title">Home</span></a></li>
      <li id="menu-item-2003" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-sub current-menu-item"><a class="menu-image-title-after"><span class="menu-image-title">Products</span></a>
        <ul style="display: none;">
          <li id="menu-item-2005" class="menu-item menu-item-type-taxonomy menu-item-object-categories">
            <a href="http://site.local/categories/airway-management/" class="menu-image-title-below menu-image-not-hovered"><img src="http://site.local/wp-content/uploads/2018/04/flexicare-airway-management-icon.svg" class="menu-image menu-image-title-below" alt=""><span class="menu-image-title">Airway Management</span></a>
          </li>
          <li id="menu-item-2006" class="menu-item menu-item-type-taxonomy menu-item-object-categories">
            <a href="http://site.local/categories/anaesthesia-breathing-systems/" class="menu-image-title-below menu-image-not-hovered"><img src="http://site.local/wp-content/uploads/2018/04/flexicare-anaesthesia-breathing-systems-icon.svg" class="menu-image menu-image-title-below" alt=""><span class="menu-image-title">Anaesthesia Breathing Systems</span></a>
          </li>
          <li id="menu-item-2007" class="menu-item menu-item-type-taxonomy menu-item-object-categories">
            <a href="http://site.local/categories/anaesthesia-components/" class="menu-image-title-below menu-image-not-hovered"><img src="http://site.local/wp-content/uploads/2018/04/flexicare-anaesthesia-components-icon.svg" class="menu-image menu-image-title-below" alt=""><span class="menu-image-title">Anaesthesia Components</span></a>
          </li>
          <li id="menu-item-2012" class="menu-item menu-item-type-taxonomy menu-item-object-categories">
            <a href="http://site.local/categories/ventilator-breathing-systems/" class="menu-image-title-below menu-image-not-hovered"><img src="http://site.local/wp-content/uploads/2018/04/flexicare-ventilator-breathing-systems-icon.svg" class="menu-image menu-image-title-below" alt=""><span class="menu-image-title">Ventilator Breathing Systems</span></a>
          </li>
          <li id="menu-item-2008" class="menu-item menu-item-type-taxonomy menu-item-object-categories current-categories-ancestor">
            <a href="http://site.local/categories/breathing-filters/" class="menu-image-title-below menu-image-not-hovered"><img src="http://site.local/wp-content/uploads/2018/04/flexicare-breathing-filters-icon.svg" class="menu-image menu-image-title-below" alt=""><span class="menu-image-title">Breathing Filters</span></a>
          </li>
          <li id="menu-item-2009" class="menu-item menu-item-type-taxonomy menu-item-object-categories">
            <a href="http://site.local/categories/oxygen-aerosol-therapy/" class="menu-image-title-below menu-image-not-hovered"><img src="http://site.local/wp-content/uploads/2018/04/flexicare-oxygen-aerosol-therapy-icon.svg" class="menu-image menu-image-title-below" alt=""><span class="menu-image-title">Oxygen &amp; Aerosol Therapy</span></a>
          </li>
          <li id="menu-item-2010" class="menu-item menu-item-type-taxonomy menu-item-object-categories">
            <a href="http://site.local/categories/resuscitation/" class="menu-image-title-below menu-image-not-hovered"><img src="http://site.local/wp-content/uploads/2018/04/flexicare-resuscitation-icon.svg" class="menu-image menu-image-title-below" alt=""><span class="menu-image-title">Resuscitation</span></a>
          </li>
          <li id="menu-item-2011" class="menu-item menu-item-type-taxonomy menu-item-object-categories">
            <a href="http://site.local/categories/suction/" class="menu-image-title-below menu-image-not-hovered"><img src="http://site.local/wp-content/uploads/2018/04/flexicare-suction-icon.svg" class="menu-image menu-image-title-below" alt=""><span class="menu-image-title">Suction</span></a>
          </li>
          <li id="menu-item-3079" class="menu-item menu-item-type-custom menu-item-object-custom">
            <a target="_blank" href="http://site.local" class="menu-image-title-below menu-image-not-hovered"><img src="http://site.local/wp-content/uploads/2018/08/flexicare-urology-icon.svg" class="menu-image menu-image-title-below" alt=""><span class="menu-image-title">Urology</span></a>
          </li>
          <li class="product-up">
            <a href="#" class=""></a>
          </li>
        </ul>
      </li>
      <li id="menu-item-2001" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://site.local/downloads/" class="menu-image-title-after"><span class="menu-image-title">Downloads</span></a></li>
      <li id="menu-item-2000" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent"><a href="http://site.local/news-events/" class="menu-image-title-after"><span class="menu-image-title">News &amp; Events</span></a></li>
      <li id="menu-item-1999" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://site.local/about-us/" class="menu-image-title-after"><span class="menu-image-title">About Us</span></a></li>
      <li id="menu-item-1998" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://site.local/contact-us/" class="menu-image-title-after"><span class="menu-image-title">Contact Us</span></a></li>
    </ul>
  </div>
</div>

标签： jquery

jquery - 新添加的类上的单击功能未运行

问题描述

解决方案

推荐阅读