是否可以更改点击元素?

时间:2019-04-15 10:07:54

标签: javascript jquery html css

我正在构建自定义的下拉菜单,并且单击箭头图标后就设法获得了下拉功能。现在,我希望整个菜单行都可以单击,而不仅仅是箭头。很难解释,但下面提供了屏幕截图。我曾尝试过使用该代码,但未能从中获得成功。

当我单击箭头时,菜单下拉菜单: https://gyazo.com/dad1eedd6707faf1ee789b434ae239bc

当我单击菜单行而不只是箭头时,我想使其起作用。

jQuery(document).ready(function() {
  // insert toggle button
  jQuery(".advanced-sidebar-nav").each(function() {
    jQuery(".menu-item-has-children", jQuery(this)).each(function() {
      // insert toggle button
      jQuery("> a", jQuery(this)).append(
        '<span class="advanced-sidebar-nav-toggle"></span>'
      );

      // add indent
      var depth = jQuery(this).parents(".menu-item-has-children").length;
      jQuery("ul li a", jQuery(this)).attr(
        "style",
        "padding-left:" + (depth + 2) * 20 + "px !important"
      );

      // open nav menu toggle
      if (jQuery("ul", jQuery(this)).css("display") == "block") {
        jQuery(".advanced-sidebar-nav-toggle", jQuery(this)).addClass(
          "advanced-sidebar-nav-toggle-open"
        );
      }
    });
  });
  // menu toggle
  jQuery(".advanced-sidebar-nav").on(
    "click",
    ".advanced-sidebar-nav-toggle",
    function(e) {
      e.preventDefault();


      const self = this;

      jQuery(".advanced-sidebar-nav-menu-open").each(
        function() {
          $(this).removeClass("advanced-sidebar-nav-menu-open").siblings("ul").slideUp(300);
          $(this).children(".advanced-sidebar-nav-toggle-open").not(self).removeClass("advanced-sidebar-nav-toggle-open");
        }
      );

      jQuery(this).toggleClass("advanced-sidebar-nav-toggle-open");

      if (jQuery(this).hasClass("advanced-sidebar-nav-toggle-open")) {
        jQuery(this)
          .parent("a")
          .addClass("advanced-sidebar-nav-menu-open")
          .siblings("ul")
          .slideDown(300);

      } else {
        jQuery(this)
          .parent("a")
          .removeClass("advanced-sidebar-nav-menu-open")
          .siblings("ul")
          .slideUp(300);
      }
    }
  );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="home-category-container">
  <aside id="advanced_sidebar_nav_widget-3" class="widget-odd widget-last widget-first widget-1 widget woocommerce widget_product_categories widget advanced-sidebar-nav-widget">
    <h3 class="widget-title">Product categorieën</h3>
    <div class="advanced-sidebar-nav advanced-sidebar-nav-default">
      <ul id="menu-sidebar-menu" class="advanced-sidebar-menu">
        <li id="menu-item-4701" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4701"><a href="#" class="">Laptops<span class="advanced-sidebar-nav-toggle"></span></a>
          <ul class="sub-menu" style="display: none; height: 200px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px; overflow: hidden;">
            <li id="menu-item-4696" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4696"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/i3/" style="padding-left:40px !important">i3</a></li>
            <li id="menu-item-4697" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4697"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/i5/" style="padding-left:40px !important">i5</a></li>
            <li id="menu-item-4698" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4698"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/i7/" style="padding-left:40px !important">i7</a></li>
            <li id="menu-item-4695" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4695"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/laptops/game-laptops/" style="padding-left:40px !important">Game laptops</a></li>
          </ul>
        </li>
        <li id="menu-item-4703" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4703"><a href="#">Computers<span class="advanced-sidebar-nav-toggle"></span></a>
          <ul class="sub-menu">
            <li id="menu-item-4709" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4709"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/computers/tower/" style="padding-left:40px !important">Tower</a></li>
            <li id="menu-item-4710" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4710"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/computers/workstation/" style="padding-left:40px !important">Workstation</a></li>
            <li id="menu-item-4708" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4708"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/computers/game-computers/" style="padding-left:40px !important">Game computers</a></li>
          </ul>
        </li>
        <li id="menu-item-4704" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4704"><a href="#">Monitoren<span class="advanced-sidebar-nav-toggle"></span></a>
          <ul class="sub-menu">
            <li id="menu-item-4712" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4712"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/19/" style="padding-left:40px !important">19″</a></li>
            <li id="menu-item-4713" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4713"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/22/" style="padding-left:40px !important">22″</a></li>
            <li id="menu-item-4714" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4714"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/24/" style="padding-left:40px !important">24″</a></li>
            <li id="menu-item-4715" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4715"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/27/" style="padding-left:40px !important">27″</a></li>
            <li id="menu-item-4716" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4716"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/monitoren/32/" style="padding-left:40px !important">32″</a></li>
          </ul>
        </li>
        <li id="menu-item-4705" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4705"><a href="#">Netwerkapparatuur<span class="advanced-sidebar-nav-toggle"></span></a>
          <ul class="sub-menu">
            <li id="menu-item-4721" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4721"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/switchers/" style="padding-left:40px !important">Switchers</a></li>
            <li id="menu-item-4718" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4718"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/nas/" style="padding-left:40px !important">Nas</a></li>
            <li id="menu-item-4722" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4722"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/thin-clients/" style="padding-left:40px !important">Thin clients</a></li>
            <li id="menu-item-4717" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4717"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/accespoints/" style="padding-left:40px !important">Access Points</a></li>
            <li id="menu-item-4719" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4719"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/repeaters/" style="padding-left:40px !important">Repeaters</a></li>
            <li id="menu-item-4720" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4720"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/netwerkapparatuur/routers/" style="padding-left:40px !important">Routers</a></li>
          </ul>
        </li>
        <li id="menu-item-4706" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4706"><a href="#">Hard Drive<span class="advanced-sidebar-nav-toggle"></span></a>
          <ul class="sub-menu">
            <li id="menu-item-4725" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4725"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/ssd-drive/" style="padding-left:40px !important">SSD Drive</a></li>
            <li id="menu-item-4726" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4726"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/ssd-m-2/" style="padding-left:40px !important">SSD M.2</a></li>
            <li id="menu-item-4727" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4727"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/ssd-msata/" style="padding-left:40px !important">SSD Msata</a></li>
            <li id="menu-item-4723" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4723"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/sata-2-5/" style="padding-left:40px !important">Sata 2.5″</a></li>
            <li id="menu-item-4724" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4724"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/hard-drive/sata-3-5/" style="padding-left:40px !important">Sata 3.5″</a></li>
          </ul>
        </li>
        <li id="menu-item-4707" class="dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4707"><a href="#">Accessoires<span class="advanced-sidebar-nav-toggle"></span></a>
          <ul class="sub-menu">
            <li id="menu-item-4729" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4729"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/accessoires/kabels/" style="padding-left:40px !important">Kabels</a></li>
            <li id="menu-item-4728" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4728"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/accessoires/adapters/" style="padding-left:40px !important">Adapters</a></li>
            <li id="menu-item-4730" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4730"><a href="http://projecten.jumsum.nl/adtcomputers/product-category/accessoires/memory/" style="padding-left:40px !important">Memory</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </aside>
</div>

我尝试将单击更改为自己的自定义类.dropdown,但单击时将其添加到自定义类中,而不是.advanced-sidebar-nav-menu。

非常感谢您的帮助。

谢谢!

2 个答案:

答案 0 :(得分:0)

如果我是对的,那么您需要整个li是可单击的,如果您希望这样,则需要尝试这种方式,而不是锚定链接,请提供li元素的链接为可点击。

如果您有子菜单,也可以在此处提供条件,然后仅通过添加一些类使其可单击。

    jQuery(".menu-sidebar-menu").on(
        "click",
        "li",function(){ 
    // your calculation 
});

答案 1 :(得分:0)

我已经解决了这个问题,我将jQuery单击更改为另一个名为.dropdown的类。然后,当用户单击菜单中的行时,它将执行旧功能。

我已经更改了对jQuery选择器的所有'''this'''引用以及它附带的查找功能,以在相应位置添加和删除类。

 jQuery(".advanced-sidebar-nav").on(
        "click",
        ".dropdown",
        function(e) {
            e.preventDefault();


           const self = $(this).find(".advanced-sidebar-nav-toggle");

            jQuery(".advanced-sidebar-nav-menu-open").each(
              function() {
                  $(this).find(".advanced-sidebar-nav-toggle").parent("a").removeClass("advanced-sidebar-nav-menu-open").siblings("ul").slideUp(300);
                  $(this).find(".advanced-sidebar-nav-toggle").not(self).removeClass("advanced-sidebar-nav-toggle-open");
              }
            );

            jQuery(self).toggleClass("advanced-sidebar-nav-toggle-open");

            if(jQuery(self).hasClass("advanced-sidebar-nav-toggle-open")) {
                jQuery(self)
                      .parent("a")
                      .addClass("advanced-sidebar-nav-menu-open")
                      .siblings("ul")
                      .slideDown(300);

                  } else {
                    jQuery(self)
                      .parent("a")
                      .removeClass("advanced-sidebar-nav-menu-open")
                      .siblings("ul")
                      .slideUp(300);
                  }
        }
    );