如何在display：none和display：block之间切换

Question

Responsive menu

I've got a navigation menu that holds 4 elements. One of them is not displayed (display:none). When you resize a window to 700px navigation menu appears and 3 other elements become hidden. When you click on "Menu" JQuery selects all hidden elements and display them as block elements. But when you click on "Menu" second time nothing happens. Can't figure out how to fix JQuery code. Can anyone help?

HTML:

<ul class="topnav">
    <a href="javascript:void(0);" onclick="myFunction()"><li class="menu">Menu</li></a>
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
</ul>

CSS:

    .topnav {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }

    .topnav li {
        display: inline-block;
        padding: 10px;
    }

    li.menu {
        display: none;
    }

@media screen and (max-width:700px) {

    .topnav li {
        display: none;
    }

    li.menu {
        display: block;
    }   
}

JQuery:

function myFunction() {

        if($("ul.topnav li:hidden")) {
            $("ul.topnav li:hidden").css("display", "block");
        }
        else  {
            $("ul.topnav li:not(:first-child)").css("display", "none");
        }

    }

Answer 1

Passing a selector to jQuery in an expression like $("ul.topnav li:hidden") will always result in a jQuery object being returned. Thus,

    if($("ul.topnav li:hidden")) {

will always succeed, because an object reference is always "truthy". If you want to test whether the selector matched any elements:

    if($("ul.topnav li:hidden").length) {

will check for the length to be non-zero.

edit and as pointed out in a comment to my answer, the jQuery .toggle() method may suit your needs and make your code simpler and shorter.

Answer 2

You never need to use an attribute event handler if you are using jQuery. There's several ways to achieve your objective. .toggle() is probably the easiest method to use. Btw, didn't understand the layout you had a <li> inside an <a> so I rearranged elements a bit so it's efficient.

SNIPPET

 $('.menu').on('click', function(e) { e.preventDefault(); $('.topnav li').toggle(); }); 

 .topnav { max-width: 900px; margin: 0 auto; text-align: center; } .topnav li { display: inline-block; padding: 10px; } .menu { display: none; } @media screen and (max-width: 700px) { .topnav li { display: none; } .menu { display: block; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#/" class='menu'>Menu</a> <ul class="topnav"> <li>test 1</li> <li>test 2</li> <li>test 3</li> </ul> 

Answer 3

First off, you can't have an <a> tag as a direct descendant of a <ul> .

With jQuery, it's also better practiced to hook onto a click event with jQuery, rather than an inline onClick handler.

Lastly it would be better to apply a class to your parent <ul> element to control the display property of it's children, as opposed to applying inline styles to your list items.

Refactored code: https://jsfiddle.net/00wdb9q6/1/

$('li.menu').on('click',function(){
  $(this).parent().toggleClass('show-items');
});