如何在下拉菜单功能onclick中包含<a>标记同级？

我有一个导航，其中有一个js子菜单，点击下拉菜单。

这是js代码：

// dropdown button

    var mainMenuDropdownLink = $('.nav-menu .menu-item-has-children > a, .nav-menu .page_item_has_children > a');
    var dropDownArrow = $('<a href="#" class="dropdown-toggle"><span class="screen-reader-text">toggle child menu</span>+</a>');

    mainMenuDropdownLink.after(dropDownArrow);

// dropdown open on click

    var dropDownButton = mainMenuDropdownLink.next('a.dropdown-toggle');

    dropDownButton.on('click', function(e){
        e.preventDefault();
        var $this = $(this);
        $this.parent('li').toggleClass('toggle-on').siblings().removeClass('toggle-on').find('.toggle-on').removeClass('toggle-on');            
    });

你可以在这里看到分期网站。 （html代码非常混乱，所以我没有在这里发布。）

http://local.curesstudio.com/service-type/skincare/

注意导航中的+加号。 这是下拉菜单。 我想让整个菜单激活下拉菜单。 所以点击LASHES + BROWS可以激活子菜单。仍然是js的noob，所以对我来说很容易。 谢谢。

---

尝试在div中添加所有<a>元素，然后在点击时在该div上应用hide show。

<div class="dropdown">
    <button onclick="showDropdown()" class="dropbtn">Dropdown</button>
      <div id="myDropdown" class="dropdown-content">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
      </div>
    </div>

    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function showDropdown() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
    </script>

解决方案：

// dropdown button

    var mainMenuDropdownLink = $('.nav-menu .menu-item-has-children > a, .nav-menu .page_item_has_children > a');
    var dropDownArrow = $('<a href="#" class="dropdown-toggle"><span class="screen-reader-text">toggle child menu</span>+</a>');

    mainMenuDropdownLink.after(dropDownArrow);

// dropdown open on click

    //var dropDownButton = mainMenuDropdownLink.next('a.dropdown-toggle'); ----no need for this now

    $('.lashes_brows, .dropdown-toggle').on('click', function(e){
        e.preventDefault();
        var $this = $(this);
        $this.parent('li').toggleClass('toggle-on').siblings().removeClass('toggle-on').find('.toggle-on').removeClass('toggle-on');            
    });

只要记得给你的睫毛和眉毛<a>元素一个新的类名为lashes_brows这样

<a href="#" class="lashes_brows">LASHES AND BROWS</a>

链接地址: http://www.djcxy.com/p/83547.html

上一篇: How to include <a> tag sibling in dropdown menu function onclick?

下一篇: Add custom property in attributes magento