1

我有一组动态构建的 div，可以包含几行内容。我们将输出限制为每行三列。使用 jquery toggle 切换 div 中的某些内容，我试图移动下面的每个 div（以垂直方式）以留出读取切换元素的空间。我已经尝试使用以下标记：

<script type="text/javascript">
    $(".trigger").click(function () {
        var trigger = $(this);
        $(this).next(".toggle").slideToggle();

    });
</script>
<div id="toggleContainer">
    <div>
        <h3 class="trigger">Trigger 1</h3> 
        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 2</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 3</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 4</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 5</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 6</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 7</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 8</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
    <div>
        <h3 class="trigger">Trigger 9</h3>

        <ul class="toggle">
            <li>Line One</li>
            <li>Line Two</li>
            <li>Line Three</li>
        </ul>
    </div>
</div>

此外，在这个小提琴中展示

这会将下面的每个元素向右移动，以允许查看切换的内容。我的问题是：如何在不将行向右移动的情况下将内容向下移动到下一行？这是我要完成的示例：

A1 A2 A3

B1 B2 B3

C1 C2 C3

单击 A1 时，B1 和 C1 的状态将是：

A1 A2 A3

A1 切换 B2 B3

B1 C2 C3

C1

4

2 回答 2

0

如果您想将内容重叠到下一行，您可以position:absolute切换类并相应地z-index增加

于 2013-05-08T14:36:22.873 回答
0

您可以简单地考虑排列内容的方式。您可以将它们垂直排列而不是水平排列，这样您就有了这样的东西：

$(".trigger").click(function() {
  var trigger = $(this);
  $(this).next(".toggle").slideToggle();

});
div#toggleContainer {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

div.content {
  flex: 0 0 33%;
}

h3 {
  font-size: 2em;
  position: relative;
  cursor:pointer;
}

.toggle {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggleContainer">
  <div class="content">
    <h3 class="trigger">Trigger 1</h3>
    <ul class="toggle">
      <li>Line One</li>
      <li>Line Two</li>
      <li>Line Three</li>
    </ul>
    <h3 class="trigger">Trigger 4</h3>

    <ul class="toggle">
      <li>Line One</li>
      <li>Line Two</li>
      <li>Line Three</li>
    </ul>
    <h3 class="trigger">Trigger 7</h3>

    <ul class="toggle">
      <li>Line One</li>
      <li>Line Two</li>
      <li>Line Three</li>
    </ul>
  </div>
  <div class="content">
    <h3 class="trigger">Trigger 2</h3>

    <ul class="toggle">
      <li>Line One</li>
      <li>Line Two</li>
      <li>Line Three</li>
    </ul>
    <h3 class="trigger">Trigger 5</h3>

    <ul class="toggle">
      <li>Line One</li>
      <li>Line Two</li>
      <li>Line Three</li>
    </ul>
    <h3 class="trigger">Trigger 8</h3>

    <ul class="toggle">
      <li>Line One</li>
      <li>Line Two</li>
      <li>Line Three</li>
    </ul>
  </div>
  <div class="content">
    <h3 class="trigger">Trigger 3</h3>

    <ul class="toggle">
      <li>Line One</li>
      <li>Line Two</li>
      <li>Line Three</li>
    </ul>
    <h3 class="trigger">Trigger 6</h3>

    <ul class="toggle">
      <li>Line One</li>
      <li>Line Two</li>
      <li>Line Three</li>
    </ul>
    <h3 class="trigger">Trigger 9</h3>

    <ul class="toggle">
      <li>Line One</li>
      <li>Line Two</li>
      <li>Line Three</li>
    </ul>
  </div>
</div>

flex为了更好地排列元素，我也使用过。

于 2017-11-02T11:52:34.303 回答