Within my menu, I have a section for portfolios that transforms into a dropdown on desktop hover and mobile click. The issue arises on mobile devices where the first click displays the menu correctly, but subsequent clicks do not trigger any change.
I attempted to use .toggle() and .toggleClass(), yet neither approach produced the desired outcome. Currently, I am experimenting with an if/else statement in the JavaScript provided below. Essentially, it checks if the window width is less than 940px and then toggles the visibility of the menu on click of the parent element.
Edit:
For testing purposes, I am only conducting these tests on browser windows narrower than 940px to simulate a mobile experience.
Edit #2:
I have omitted the "if window width < 940px" condition from this question, as it might simplify responses at this stage.
$(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>