How to include tag sibling in dropdown menu function onclick?

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/

Notice the + plus sign in the nav. That's the dropdown menu. I'd like to make the whole menu activate the dropdown. So clicking on LASHES + BROWS activates the submenu.. Still a noob with js so go easy on me. Thanks.

abhit · Answer 1 · 2016-12-09T07:09:11.830

0

Try to add all the <a> elements in a div and then apply hide show on that div on click.

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

Your Solution:

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

just remember to give your lashes and brows <a> element a new class named lashes_brows like this

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

edited Dec 09 '16 at 07:09

answered Dec 09 '16 at 06:34

abhit

973
3
17
40

Thanks but I was hoping to keep most of the code as it is without changing too much. Is there a way I can just include the link "LASHES AND BROWS" in the script? @lakshay – kevllar Dec 09 '16 at 06:40
sorry, didn't get your question? – abhit Dec 09 '16 at 06:44
So when you click on Lashes and Brows I want it to do the same thing as the + symbol. I would rather not rewrite all the code just to do that... Is there a simple solution? – kevllar Dec 09 '16 at 06:51
just add the class of `lashes and brows` where you are performing the action for + icon. `$('.+buttonClassName, .eyes&lashesClassName').click(function() { //code of opening the menu u have wriiten for +button });` – abhit Dec 09 '16 at 06:55
Yes that's the solution I was thinking of. Can you update your answer and I will approve it? I simply don't know how to write the code. Thanks. – kevllar Dec 09 '16 at 06:57
just gave me the code u have written for opening the menu onclicking the + button and I will add on it. – abhit Dec 09 '16 at 06:59
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/130186/discussion-between-lakshay-and-kevllar). – abhit Dec 09 '16 at 06:59
it is in my original question above. – kevllar Dec 09 '16 at 07:02
For some reason your solution is not working. I had to duplicate this line of jquery and insert the new class. `$('.lashes_brows').toggleClass('toggle-on').siblings().removeClass('toggle-on').find('.toggle-on').removeClass('toggle-on');` This works. – kevllar Dec 09 '16 at 17:45

How to include tag sibling in dropdown menu function onclick?

1 Answers1