CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
jack_of_all_trades
jack_of_all_trades

Reputation: 332

Menu disappears after toggle

I've got a drop down list menu for when the window width is 720px or less. When the resolution exceeds that, the li elements are displayed as table-cells. The drop down menu itself works fine, but when I close the menu and expand the resolution past 720px, the entire list is gone. How do I fix this so that the list is always visible past 720px?

Here's a picture of my problem in case I didn't explain that too well: jQuery toggle causing my menu to disappear

HTML

<div class='menu'>
    <button type='button' class='showList'>Menu</button>
    <div class='full_list'>
        <ul>
           <li></li>
           <li></li>
           <li></li>
        </ul>
     </div>
</div>

CSS

.full_list {
    display: none;
}

@media (min-width: 720px) {
    .full_list {
        display: block;
    }

    .menu button {
        display: none;
    }

    .menu {
        display: table;
        background: #fff;
        margin: 0 auto;
    }

    li {
        display: table-cell;
        vertical-align: middle;
    }

    ul {
        white-space: nowrap;
    }
}

Javascript

$(document).ready(function() {
    $('.showList').click(function() {
        $('.full_list').slideToggle("fast");
    });
});

Click here for the fiddle be sure to resize it before and after clicking the menu button.

Thanks for any help!

Upvotes: 2

Views: 1316

Answers (4)

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3798

A much better way to do this would be do toggle class.

Create a class as - 

.full_list-expanded {
        display: block;
}

and modify the jQuery as-

$(document).ready(function() {      
    $(".showList").click(function() {       
        $(".full_list").slideToggle(400, function() {
            $(this).toggleClass("full_list-expanded").css('display', '');
        });     
    }); 
});

Here is the fiddle.

Upvotes: 2

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3798

Although fuyushimoya's solution is functional, the use of !important must be avoided as much as you can. It should be considered as a last resort.

Try modifying jQuery like this - 

$(document).ready(function() {
    $('.showList').click(function() {
        $('.full_list').slideToggle("fast");
    });
  $(window).resize(function(){
    if($(window).width()>=720)
      $('.full_list').css('display','block');
    else
      $('.full_list').css('display','none');
  });
});

This is the fiddle

Upvotes: 2

Ravi Chauhan
Ravi Chauhan

Reputation: 1477

<style>
    .full_list {
        display: none;
    }
    .showList{
        border: none;
        width: 100%;
        padding: 5px 0px; 
        text-align: center;
        background: #CCC;
        cursor: pointer;
    }
    .full_list{
        width: 100%;
        float: left;
    }
    .full_list > ul{
        float: left;
        margin: 0;
        padding: 0;
        text-align: center;
        width: 100%;
    }
    .full_list > ul > li{
        list-style: none;
        text-align: center;
        padding: 5px 0px;
        border-left: 1px solid #CCC;
        border-right: 1px solid #CCC;
        border-bottom: 1px solid #CCC;
        width: 99%;
        float: left;
    }

    @media (min-width: 720px) {
        .full_list {
            display: block;
        }

        .menu button {
            display: none;
        }

        .menu {
            display: table;
            background: #fff;
            margin: 0 auto;
        }

        li {
            display: table-cell;
            vertical-align: middle;
        }

        ul {
            white-space: nowrap;
        }

    }
</style>
<div class='menu'>
    <button type='button' class='showList'>Menu</button>
    <div class='full_list'>
        <ul>
            <li>dsdsadsa</li>
            <li>sadsadsadsad</li>
            <li>fdsfds</li>
        </ul>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.showList').click(function () {
            $('.full_list').slideToggle("fast");
        });
    });
</script>

Upvotes: 0

fuyushimoya
fuyushimoya

Reputation: 9813

As you want the .full_list to keep its diplay:block not affect by the .slideToggle(), add !important to 

.full_list {
        display: block;
    }

So it becomes 

.full_list {
    display: none;
}

@media (min-width: 720px) {
    .full_list {
        display: block !important; 
    }

    .menu button {
        display: none;
    }

    .menu {
        display: table;
        background: #fff;
        margin: 0 auto;
    }

    li {
        display: table-cell;
        vertical-align: middle;
    }

    ul {
        white-space: nowrap;
    }
}

See jsfiddle, or altered version of your jsfiddle

Upvotes: 3

Related Questions