单击后，使菜单消失在菜单上。 “显示”有效，但“隐藏”无效

Question

I have a portfolios item inside my menu, which then becomes a dropdown menu on hover for desktop and click for mobile. The problem with mobile is that the first click shows the menu, which is all good, but the next clicks don't change anything.

I've tried .toggle() , .toggleClass() , both of which don't seem to work. I'm currently testing out an if/else statement, shown in the JavaScript below. "If the window width is less than 940px"... and then "if the current visibility is hidden , change it to visibility: visible on click of the parent" and vice versa for the else.

Edit:

I'm only testing this in browser windows that are less than 940px to emulate the "mobile" experience.

Edit #2:

I removed the if window width < 940px for the purposes of this question since it might be easier to respond to that way?

 $(function() { if ($('.nav__portfolio ul').css('visibility', 'hidden') == true) { $('.nav__portfolio').on('click', function() { $('.nav__portfolio ul').css('visibility', 'visible'); }); } else { $('.nav__portfolio').on('click', function() { $('.nav__portfolio ul').css('visibility', 'hidden'); }); } }; 

 .nav__portfolio ul { visibility: hidden; 

 <li class="nav__portfolio"><p>PORTFOLIO</p> <ul> <li>Dropdown Item</li> <li>Dropdown Item</li> <li>Dropdown Item</li> </ul> </li> 

Answer 1

I guess your main problem is the condition you pass to the if statement:

• $('.nav__portfolio ul').css('visibility', 'hidden') isn't a boolean so it doesn't return true or false

What you can do is compare the actual value for that css property like this:

 $('button').on('click', function() { if ($('div').css('visibility') !== 'hidden') { $('div').css('visibility', 'hidden'); } else { $('div').css('visibility', 'visible'); } }) 

 div { height: 200px; margin: 20px 0; background: #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Toggle the div</button> <div></div> 

---

This logic on your actual code will be something like:

$('.nav__portfolio').on('click', function() {
  if ($('.nav__portfolio ul').css('visibility') == 'hidden') {
    $('.nav__portfolio ul').css('visibility', 'visible');
  } else {
    $('.nav__portfolio ul').css('visibility', 'hidden');
  }
})

Answer 2

With the toggle() method:

 $('.nav__portfolio').on('click', function() { $('.nav__portfolio ul').toggle(); }) 

 .nav__portfolio ul { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <li class="nav__portfolio"><p>PORTFOLIO</p> <ul> <li>Dropdown Item</li> <li>Dropdown Item</li> <li>Dropdown Item</li> </ul> </li> 

Answer 3

Have you tried hasClass/addClass/removeClass instead?

probably only need one click listener

if ($(window).width() <= 940) {

    $('.nav__portfolio').on('click', function() {
        if ($('.nav__portfolio ul').hasClass('visibleClass') {
            $('.nav__portfolio ul').removeClass('visibleClass');
        } else {
            $('.nav__portfolio ul').addClass('visibleClass');
        }
    });
}

.nav__portfolio ul {
    visibility: hidden;
}

.nav__portfolio ul.visibleClass {
    visibility: visible;
}