Question

I've got a nav that has a js sub-menu that drops down on click.

Here's the js code:

// 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');            
    });

You can see the staging site here. (The html code is pretty messy so I didn't post it here.)

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

注意导航中的+加号。那是下拉菜单。我想让整个菜单激活下拉列表。所以点击LASHES + BROWS会激活子菜单..还是一个带有js的菜鸟对我来说很容易。感谢。

Answer 1

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

<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>

如何加入<a> tag sibling in dropdown menu function onclick?

1 个答案: