Responsive design method for collapsing a div

问题

I'm using a CSS theme with a sidebar navigation menu. I'd like to add a button, to let users close the sidebar.

I'm familiar with jQuery toggle, show, hide, etc... and I could write the script to hide and show the div a number of ways, but is there a compliant way to do it, that will work on most browsers and phones?

Is there a better option other than show hide in jQuery?

Thanks

回答1:

The most proper way would be to just toggle a class and to the rest with css...

var $yourSidebar = $(".sidebar");
$(document).on("click.toggleNav touch.toggleNav", ".yourTriggerButton", function(){ 
 $yourSidebar.toggleClass("open");
});

in your css, you can use media queries to make the navigation behave differently for each resolution range and even animate properly using css transitions.

This will work on almost all mobile and desktop devices.

DMEO: http://jsfiddle.net/a24fQ/

回答2:

u can use css visibility attribute and make visibility: hidden on click event. like jQuery (selector).css('visibility','hidden');

回答3:

use this in class...

div
{
display:none;
}
div:hover
{
display:block;
}

回答4:

I think there is no actual a better way, then using JS. Becuase you need to handle toggling on button click. Using of jQuery, ExtJS, or straight JS it is a questions of using of tool. t So, using of JavaScript this is absolutly normal in this case.

来源：https://stackoverflow.com/questions/10716885/responsive-design-method-for-collapsing-a-div