Question

jsFiddle reproduction

我有一些div元素嵌套在span下面。我需要外部元素的内联行为和内部的块行为。我可以在.outer span父级上声明一个类，将.inner的显示设置为none。如果我在HTML中声明这一点，那么所有跨度都会按预期折叠成一行。但是，如果我使用JavaScript切换.collapse样式（在这种情况下为jQuery .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>

在以编程方式切换并在WebKit上内联声明时内联元素的显示差异

0 个答案: