jquery hide and show effect?
the code:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".toggle_container").开发者_运维技巧show();
$("h2.trigger").click(function(){
$(".toggle_container").toggle("slow");
$(".container").css('width','700px');
});
});
</script>
<body>
<div class="container">
<p>raesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. raesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
<div id="sidebar">
<div class="toggle_container">
<div class="block">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p><p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p>
</div>
</div>
<h2 class="trigger"><a href="#">hide or show</a></h2>
</div>
</body>
i want to do when the sidebar hide, the left container can full of the page(the page is consist of left container + hide/show part) but the left container width is enlarged. when the sidebar show, the page is consist of left container + sidebar + hide/show part
my js code is can't work. how to correct it. thank you.
Well, you'd need to add some kind of conditional statement in there. if {} else {} for example. You're calling a jQuery toggle command but then hardcoding what action takes place. What happens when your user clicks again to go back to the 'default' view. Your left sidebar will toggle, showing again, but your main container just stays at 700px!
This isn't exactly how I would do it but here's a quick-n-dirty example::
// jQuery toggle function
$('h2.trigger').click(function() {
var container = $('.container');
$('.toggle_container').toggle('slow');
if (container.width > 400) {
container.css('width', '400px');
} else {
container.css('width', '700px');
}
});
Again, quick-n-dirty but it should give you the results that you want.
Now that I've answered your question I'd like to point out a couple things.
1 You have a rather low acceptance rate. Go to your profile page and look at the questions you've asked. Has somebody answered them correctly/to your satisfaction? Mark their answer as the one you accept! This helps the community and encourages people to answer your questions.
2 Try not to post huge, massive walls of code. Most people, not willing to look through it. Instead break out a small 'chunk' of an example that shows the issue and the relevant code. For your question all that CSS is completely irrelevant and could have been left out.
加载中,请稍侯......
精彩评论