代码之家 › 专栏 › 技术社区 › Brad

toggle div填充IE中的剩余空间,而不是google chrome或firefox

css html jquery

Brad · 技术社区 · 16 年前

我使用jquery的toggle函数来切换4个内容块。

谷歌Chrome中如何正常工作的屏幕显示: http://screenr.com/w8l

它如何不起作用的屏幕显示,在IE 7中: http://screenr.com/I8l

请参见第页: http://www.herkimer.edu/impact

对于您单击的每个标题(h2),它将在新行上开始该节,但在IE 7中显示它

示例HTML:

<div class="divide-details">
  <h2><a href="#" title="view Student Perspective" class="student-perspective">Student Perspective</a> <a href="#" title="view Student Perspective" class="student-perspective"><span>&raquo;</span></a></h2>
  <div id="student-perspective-details">
        <p>Content</p>
    <div class="clear-both"></div>
  </div>
</div>

<div class="divide-details">
  <h2><a href="#" title="view Social Perspective" class="social-perspective">Social Perspective</a> <a href="#" title="view Social Perspective" class="social-perspective"><span>&raquo;</span></a></h2>
  <div id="social-perspective-details">
    <p>Content</p>
    <div class="clear-both"></div>
  </div>
</div>

<div class="divide-details">
  <h2><a href="#" title="view Taxpayer Perspective" class="taxpayer-perspective">Taxpayer Perspective</a> <a href="#" title="view Taxpayer Perspective" class="taxpayer-perspective"><span>&raquo;</span></a></h2>
  <div id="taxpayer-perspective-details">
    <p>Content</p>
    <div class="clear-both"></div>
  </div>
</div>

<div class="divide-details">
  <h2><a href="#" title="view Business Perspective" class="business-perspective">Business Perspective</a> <a href="#" title="view Business Perspective" class="business-perspective"><span>&raquo;</span></a></h2>
  <div id="business-perspective-details">
    <p>Content</p>
    <div class="clear-both"></div>
  </div>
</div>

CSS

#student-perspective-details,
#social-perspective-details, #business-perspective-details, 
#taxpayer-perspective-details { display:none; border-bottom:1px solid #ccc; clear:both; overflow:auto; width:100%; clear:both; }

.divide-details {
  float:left;
  margin:0 0 5px 0;
  padding:5px;
}

.divide-details h2 {
  font-size:1.5em;
}

.divide-details h2 a:link,
.divide-details h2 a:visited { color:#000; text-decoration:none; }

.divide-details h2 a:hover { color:#01552E; text-decoration:underline; }

.divide-details h2 a:link span,
.divide-details h2 a:visited span { color:#C56B02; text-decoration:underline; }

.divide-details h2 a:hover span { color:#01552E; text-decoration:underline; }

要切换的jquery

$(document).ready(function() {
    $('.student-perspective').click(function() {
    $("#student-perspective-details").slideToggle(100);
        return false;
    });

  $('.social-perspective').click(function() {
    $("#social-perspective-details").slideToggle(100);
        return false;
    });

    $('.taxpayer-perspective').click(function() {
    $("#taxpayer-perspective-details").slideToggle(100);
        return false;
    });


    $('.business-perspective').click(function() {
    $("#business-perspective-details").slideToggle(100);
        return false;
    });

    $('.student-perspective span').click(function() {
    $("#student-perspective-details").slideToggle(100);
        return false;
    });

  $('.social-perspective span').click(function() {
    $("#social-perspective-details").slideToggle(100);
        return false;
    });

    $('.taxpayer-perspective span').click(function() {
    $("#taxpayer-perspective-details").slideToggle(100);
        return false;
    });


    $('.business-perspective span').click(function() {
    $("#business-perspective-details").slideToggle(100);
        return false;
    });
});

2 回复 | 直到 15 年前

BrendonKoz 16 年前

如果不真正了解它为什么不起作用或如何不起作用,一个简单的解决方法可能是在slidetoggle上应用一个回调函数,该函数将从.divide details div中切换float:left属性。我可以想象,当slidetoggle激活时将其移除,并在完成后将其放回原处,将解决您的交叉问题。浏览器问题。

另一种解决方案是在页面加载时将h2元素设置为内联(这样,对于那些未启用JS的元素,您就不会弄乱渲染),删除float:left设置,并在切换细节div时切换display:block on/off。

jazkat 15 年前

我注意到,如果您添加样式“display:inline”,它就可以正常工作。