Question

代码：

<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>

我希望当侧边栏隐藏时，左边的容器可以填满页面（当侧边栏显示时，页面由left container + hide/show part) but the left container width is enlarged.组成，页面由left container + sidebar + hide/show part组成我的js代码无法正常工作。如何纠正它。谢谢。

Answer 1

嗯，你需要在那里添加某种条件语句。 if {} else {}例如。您正在调用jQuery切换命令，但随后硬编码将执行的操作。当您的用户再次点击以返回“默认”视图时会发生什么。您的左侧边栏将切换，再次显示，但您的主容器只停留在700px！

这并不是我会怎么做但这里是一个快速的例子::

// 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');
    }

});

再次，快速肮脏，但它应该给你你想要的结果。

既然我已经回答了你的问题，我想指出一些事情。

1你的接受率相当低。转到您的个人资料页面，查看您提出的问题。有人正确地回答了他们/令你满意吗？将他们的答案标记为您接受的答案！这有助于社区，并鼓励人们回答您的问题。

2尽量不要发布庞大而庞大的代码墙。大多数人，不愿意透视它。而是打破一个显示问题和相关代码的示例的小“块”。对于你的问题，所有CSS完全不相关，可能被遗漏了。

jquery隐藏和显示效果？

1 个答案: