Question

我希望将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>

Answer 1

对于动态添加的元素，您必须使用事件委托：

$(document).on('click', '.products-active', function() {
   // ...
});

新添加的未运行类的点击功能

1 个答案: