0

jsFiddleの再現

divの下にネストされた要素がいくつかありspanます。外側の要素のインライン動作と内側のブロック動作が必要です。as.outerの表示を設定するスパンの親でクラスを宣言できます。これを HTML 自体で宣言すると、すべてのスパンが予想どおり 1 行に折りたたまれます。ただし、 JavaScript (この場合は jQuery ) でスタイルを切り替えると、ブロック レベル要素のコンテナが表示されていなくても、ブラウザは垂直方向のスペースを再利用しません。.innernone.collapse.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