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

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
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);

<do not remove the three backticks above>

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:

2 Likes

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!

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);
1 Like

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

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

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>

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

2 Likes

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

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

3 Likes

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.

sure send me the link

@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

5 Likes

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

1 Like

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