0

jsFiddle再现

我有一些div嵌套在span. 我需要外部元素的内联行为和内部元素的块行为。我可以在.outerspan 父级上声明一个将显示设置为.inneras的类none。如果我在 HTML 本身中声明这一点，所有跨度都按预期折叠成一行。但是，如果我使用 JavaScript（在本例中为.collapsejQuery ）切换样式。.toggleClass我仍然得到一个神秘的换行符，即即使没有显示块级元素的容器，浏览器也不会回收垂直空间。

这只发生在 WebKit（Chrome 和 Safari）中。Firefox 的行为符合我的预期。我没有费心在 IE 中尝试这个。

非常感谢解释和/或解决方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Spans</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">//</script>
  <script type="text/javascript">
    $(document).ready(function(evt) {
      $(".toggle").click(function(evt) {
        $(this).closest(".outer").toggleClass("collapsed");
      });
    });
  </script>
  <style type="text/css">
    body { font-family: Helvetica; }
    span { padding: 0 0.5em; margin-right: 0.5em; outline: solid 1px #ccc; }
    .outer.collapsed .inner {
      display: none;
    }
    .outer.collapsed .open:after {
      content: "…";
    }
  </style>
</head>
<body>
  <h2><code>.outer.collapsed</code> toggled by jQuery</h2>
  <div><span>The following should display inline when collapsed: </span>
    <span class="outer">
      <button class="toggle">Toggle</button>
      <span class="open">[</span>
      <div class="inner">
        <div>A</div>
        <div>B</div>
        <div>C</div>
      </div>
      <span class="close">]</span>
    </span>
  </div>

  <h2><code>.outer.collapsed</code> Declared inline</h2>
  <div><span>The following should display inline when collapsed: </span>
    <span class="outer collapsed">
      <button class="toggle">Toggle</button>
      <span class="open">[</span>
      <div class="inner">
        <div>A</div>
        <div>B</div>
        <div>C</div>
      </div>
      <span class="close">]</span>
    </span>
  </div>
</body>
</html>
4

0 回答 0