Question

我有一组动态构建的div，可能包含多行内容。我们将输出限制为每行三列。使用jquery切换来切换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>

此外，在this小提琴

中演示

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

A1 A2 A3

B1 B2 B3

C1 C2 C3

点击A1，B1和C1的状态为：

A1 A2 A3

A1拨回B2 B3

B1 C2 C3

C1

Answer 1

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

Answer 2

您可以简单地考虑一下您对内容的反应方式。你可以垂直而不是水平排列它们，所以你有这样的东西：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我还使用flex来更好地安排元素。

使用jquery切换垂直调整包装的div

2 个答案: