首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >IE jQuery显示/隐藏div跳转问题

IE jQuery显示/隐藏div跳转问题
EN

Stack Overflow用户
提问于 2011-04-04 17:24:19
回答 1查看 5.3K关注 0票数 1

我正在建设一个网站,并有一个内容区与盒子,以显示公司的服务。在我的导航栏里,我有一个叫“联系人”的按钮。一旦点击了contact,内容区域就会隐藏起来,而contact div会显示出来。这在Chrome和FF中都能用,但IE就是一团糟。下面是一些代码。

联系人区域的HTML代码:

代码语言:javascript
运行
复制
<div class="contact"> 
                    <h2>Contact Us</h2> 
                    <p>For emergencies or to arrange a quote, call <span style="font-weight:bold; color:red;">999</span>. Or use the form below and we'll get back to you shortly.</p> 
                    <form class="tab"> 
                    <label for="move">Your Name:</label> 
                    <input type="text" name="move"  class="move" /><br /> 
                    <label for="locate">Your Email:</label> 
                    <input type="text" name="locate" class="locate" /><br /> >  
                    <label for="contact">&nbsp;</label> 
                    <a href='#contact' class='contact-submit'>Send!</a><a href="#" class="prepend-1 contact-close">Cancel</a><br /> 
                    </form> 
                </div>

内容区域的HTML代码:

代码语言:javascript
运行
复制
<div class="content"> 
                <div class="span-24 last"> 
                <p></p> 
                </div> 
                <div class="span-6 append-1"> 
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra malesuada orci et lacinia. Ut ac augue diam. Fusce vitae felis velit, vitae vulputate libero. Pellentesque in nibh est, tincidunt ullamcorper dolor. Etiam condimentum semper sem a mollis. Cras faucibus, neque vitae egestas imperdiet, tellus lorem rutrum massa, eget ultrices libero purus quis mi. Aliquam erat volutpat. Donec non metus id sapien pulvinar consequat. Praesent ut lectus massa, id viverra orci. In hac habitasse platea dictumst.</p> 
                </div> <!-- END span-6 DIV --> 
                <div class="span-15 append-2 last prepend-bottom box2" style="overflow:hidden;"> 
                    <p>Cras viverra placerat luctus. Cras eu elit sit amet lectus pretium egestas id a est. Mauris pretium lacus non eros dapibus at tempus leo condimentum. Quisque a elit non massa mattis pretium vitae eu est. Curabitur vulputate iaculis tellus tincidunt bibendum. Aliquam erat volutpat. Aenean nec viverra augue. Duis ultrices velit sed sapien suscipit eget dictum dolor feugiat. Aliquam erat volutpat. Nulla cursus dolor ut turpis congue sollicitudin. In hac habitasse platea dictumst. Duis facilisis malesuada magna, sed porttitor tortor posuere sed.</p> 
                </div> <!-- END span-6 DIV --> 

                <div class="prepend-3 boxes prepend-top"> 

                    <div class="clearfix row"> 

                        <div class="module compact clearfix"> 
                          <h4><a href="electrical/">Electrical</a></h4> 
                          <div class="compact-content"> 

                            <img src="assets/images/electrical-image1.jpg" alt="" > 

                            <p>We also offer electrical installations and maintenance for both commercial and domestic.</p> 

                          </div> <!-- END compact-content DIV --> 
                        </div> <!-- END module DIV --> 
                        <div class="module compact clearfix"> 
                          <h4><a href="plumbing/">Plumbing</a></h4> 
                          <div class="compact-content"> 

                            <img src="assets/images/plumbing-image1.jpg" alt="Property Maintenance and Refurbishment" > 

                            <p>We offer plumbing for the commercial industry, no matter if it's big or a small job.<br /></p> 

                          </div> <!-- END compact-content DIV --> 
                        </div> <!-- END module DIV --> 

                        <div class="module compact clearfix"> 
                          <h4><a href="security/">Security</a></h4> 
                          <div class="compact-content"> 

                            <img src="assets/images/security-image1.jpg" alt="Security" > 

                            <p>Security is key, that's why we are experts in the security field.</p> 

                          </div> <!-- END compact-content DIV --> 
                        </div> <!-- END module DIV --> 
                    </div><!-- END clearfix row --> 
                </div><!-- END prepend-3 DIV --> 
            </div><!-- END content DIV --> 

jQuery代码:

代码语言:javascript
运行
复制
$('a.contact-close').click(function(){//If cancel has been clicked, show original content.

    $('div.contact').hide('slow', function(){


            $('div.content').show('slow', function(){
                $('div.boxes').show('slow').delay(700);
            });//END div.content show-slow

        });
    });

        //Below is the contact script
        $('div.contact').hide();//Hide div

        $('div.nav a.contact').click(function(){//If Contact has been clicked show Contact div
            $('div.boxes').hide('slow', function(){
                $('div.content').hide('slow', function(){
                    $('div.contact').show('slow');

                });
            });//END Boxes hide
        });

这方面的CSS在jsFiddle上:http://jsfiddle.net/hart1994/Nh9tP/

在Internet Explorer中,它在隐藏过程中跳过方框。然后当重新显示时,它会将它们错放在两行而不是三行中。有关完整演示,请参阅下面的网站链接。

您可能需要重新构建它,因为它可能不会显示在jsFiddle中。

或者你可以看看:http://molossi.psm2.co.uk/

我已经尝试将jQuery更改为滑下/滑出和滑出/滑入。

提前感谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-04-04 21:43:50

jQuery hide()show()方法“同时对匹配元素的宽度、高度和不透明度进行动画处理”,因此当高度和宽度发生变化时,浏览器会重排文档。浏览器重新流动的方式是非常不同的,在IE中,这会使方框跳跃。你可能想要使用一个自定义的jQuery animate() --也许只需要高度?是宽度的减小导致浮动元素重新流动。

选择"Cancel“链接后出现的布局中断是由于jQuery在动画结束后将style留在了<div class="boxes">上。这导致框div不能正确清除左侧的段落,因此宽度较小,因此无法在一行中容纳3个子元素。您可以通过挂接到最终jQuery ()方法的回调中来删除显示留下的这些额外样式,如下所示:

代码语言:javascript
运行
复制
$('div.boxes').show('slow', function() {
    $(this).attr('style', '');
}).delay(700);    

还需要注意的是,IE将在quirks mode中运行可能没有帮助。你的页面没有doctype,根据我的经验,这可能会导致不想要的和意想不到的呈现问题(特别是在IE中)。除了缺少文档类型之外,还有几个小问题正在导致您的页面转到not validate

希望这是有用的:-)

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5536659

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档