Jquery toggle div会填充IE中的剩余空间，但不会填充google chrome或firefox

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

在谷歌Chrome中如何正常工作的屏幕广播：

在IE 7中，它如何不工作的屏幕广播：

请参见第页：

对于您单击的每个标题（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>

要切换的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;
    });
});

---

如果不真正了解它为什么不工作或如何不工作的本质，一个简单的解决方法可能是在slideToggle上应用回调函数，从而切换.divide details DIV中的float:left属性。我可以想象在slideToggle激活时将其删除，完成后将其放回原处可以解决跨浏览器问题

---

另一种解决方案是将H2元素设置为页面加载时的内联元素（这样你就不会弄乱那些没有启用JS的元素的渲染），删除float:left设置，并在切换细节div时切换display:block开/关。

而不真正了解它为什么或如何不工作的本质，一个简单的修复方法可能是在slideToggle上应用回调函数，该函数将从.divide details DIV中切换float:left属性。我可以想象，在slideToggle激活时将其删除，并在完成后将其放回将解决跨浏览器问题

---

另一种解决方案是，在页面加载时将H2元素设置为内联（这样，对于那些未启用JS的元素，您就不会弄乱渲染），删除float:left设置，并在切换details div时切换display:block开/关。

我注意到您添加了样式“display:inline”它工作得很好。

我注意到，如果添加样式“display:inline”，它工作得很好

$(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;
    });
});