Why is the '.dropdown-menu' not toggling when clicking on the same '.dropdown'?


#1


the .dropdown-menu of the clicked categorie (cart, accocunt, help) is only disappearing when clicking on a different categorie. when clicking on the same categorie the dropdown-menu is not toggling. thanks for your help!


This is my code:

var main = function () {
  $('.dropdown').click(function() {
    $('.dropdown-menu').hide();
    $(this).children('.dropdown-menu').toggle();
  });
};

$(document).ready(main);


#2

Hey @sjan87,

The reason it's not getting hidden is because of this line:

$('.dropdown-menu').hide();

If all of the menus are hidden, and toggle() switches the menu to the opposite of it's current state, then the menu will get shown.

So what can you do to fix this? You might be able to use jQuery's not() to avoid selecting the current menu when you hide them. I haven't tried that myself, but I expect it will work :slight_smile:


#3

Many thanks for your answer but unfortunately I'm still having the same problem. Maybe my description was bad or I didn't really understand your explanation.

code looks like this:

var main = function () {
  $('.dropdown').click(function() {

    $(this).children('.dropdown-menu').toggle();
  });
};

$(document).ready(main);

when I click cart its dropdown toggles. so far so good. but when I click on account or help the opened cart-dropdown is still visible. how can I prevent this from happening?

thanks a lot!


#4

try this

var main = function () {
  $('.dropdown').click(function() {
     $('.dropdown-menu').toggle();
  });
};

$(document).ready(main);

OR if your .dropdown is your menu then

var main = function () {
  $('.dropdown').click(function() {

    $(this).toggle();
  });
};

$(document).ready(main);

#5

ah, still doesn't work. in your code the first one would select all dropdown-menu-classes, in the second this would remove the menu-item (.dropdown).


#6

send me your html code as well please i would love to solve this issue it's hard to work with what you're doing since idk what classes of divs you're using


#7

sure. I think this piece of html-text is relevant:

           <ul>
               <li class="cart dropdown">
                <h3>cart &#x25BE;</h3>
                <ul class="dropdown-menu">
                  <li>View Cart</li>
                  <li>Saved Carts</li>
                </ul>
              </li>
              <li class="account dropdown">
                <h3>account &#x25BE;</h3>
                <ul class="dropdown-menu">
                  <li>View Account</li>
                  <li>Check Order Status</li>
                  <li>Sign in</li>
                </ul>
              </li>
              <li class="help dropdown">
                <h3>help &#x25BE;</h3>
                <ul class="dropdown-menu">
                  <li>FAQs</li>
                  <li>Return Policy</li>
                  <li>Shipping Info</li>
                </ul>
              </li>             
            </ul>

#8

okay it was just a bad html and little bit of extra jquery code. what you're looking for in these scenarios is the .find() function if you're using $(this). I fixed your html removed h3 s for simplicity but you can always add a css to change the font size here it goes.

HTML

<ul class="cart dropdown">
  <li>Cart &#x25BE;</li>
    <ul class="dropdown-menu">
      <li>View Cart</li>
      <li>Saved Carts</li>
    </ul>
  </li>
</ul>
<ul class="account dropdown">
  <li>Account &#x25BE;</li>
    <ul class="dropdown-menu">
      <li>View Account</li>
      <li>Check Status</li>
      <li>Sign in</li>
    </ul>
  </li>
</ul>
<ul class="Help dropdown">
  <li>Help &#x25BE;</li>
    <ul class="dropdown-menu">
      <li>FAQs</li>
      <li>Return Policy</li>
      <li>Shipping Info</li>
    </ul>
  </li>
</ul>

CSS

.dropdown-menu {
  display:none;
}

JQUERY

$(document).ready(function () {
  
  $('.dropdown').click(function () {
    $(this).find('.dropdown-menu').toggle();
  })
})

and if you wanna be little creative and make it more interactive i would suggest using mouseenter and mouseleave functions to show and hide the menu li elements.

let me know how this worked out for you please


#9

and here is the code for that

$(document).ready(function () {
  
  $('.dropdown').mouseenter(function () {
    $(this).find('.dropdown-menu').show('slow');
  })
  $('.dropdown').mouseleave(function () {
    $(this).find('.dropdown-menu').hide('slow');
  })
})

#10

@sjan87 Sorry I wasn't able to respond to you, but it looks like @muratkh was able to help you a little :slight_smile: Are you satisfied with how your project is now, or are you still trying to improve it?


@muratkh

if you wanna be little creative and make it more interactive i would suggest using mouseenter and mouseleave functions to show and hide the menu li elements.

That looks cool and all, but actually makes the experience on phones no good, since there is no hover or mouseenter/mouseleave on phones, only clicks. So I'd recommend using click() for stuff like this, at least in real-world projects that aren't on Codecademy :slight_smile:


#11

thank you for taking so much time for this but the problem is still there. anyway: your tip with mouseenter and mouseleave is cool. maybe you go through the exercise yourself. with your code the problem as described above will still occur.


#12

sure send me the link


#13

@sjan87 Here's how I solved the problem, I add a menu-shown class to the current menu, then hide everything except it:

$('.dropdown').click(function() {
  /*
    remove the menu-shown class from all elements
    otherwise this is useless because all menus will
    have the menu-shown class, and not get hidden
  */
  $('.menu-shown').removeClass('menu-shown');
  // now add that class back onto the current
  // menu so _it_ doesn't get hidden with the rest
  $(this).find('.dropdown-menu').addClass("menu-shown");
  
  // hide all menus except the current one
  $('.dropdown-menu').not('.menu-shown').fadeOut();
  // toggle the current menu so it will show
  // or hide depending on it's current state
  $(this).find('.dropdown-menu').fadeToggle();
});

If you don't like fading stuff, you can use hide() and toggle() as replacements for fadeOut() and fadeToggle(). This method works well especially if you want to style the menus in CSS depending on their current state, since the menu-shown class is already being used by JavaScript. You can just select .menu-shown in your CSS, and apply styles to it that way. I personally prefer to do things that way, with a menu-hidden and a menu-shown class which I toggle in JavaScript. That way I have a little more control over the menu in the CSS :slight_smile:


@muratkh Here's a link to the project: https://www.codecademy.com/courses/jquery-ext/projects/jquery-prj_madison-square-market


#14

thank you both so much. I'm really starting to get the hang out of this. great support!


#15

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.