Javascript .toggle（）一个'hidden'元素，而不以错误的方式推送其他元素（Rails、Bootstrap、jQuery）

我有9个按钮排列在一个3x3的正方形中。用户应该能够单击一个按钮，使文本字段显示在下方。下面是所有文本_字段显示的情况：

我为每个文本字段提供了一个类，该类包括

display:none

，因此在页面加载时，按钮集如下所示：

<div class='row'>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='moving_button'>Moving</div>
        <textarea class="category_input" cols="40" id="moving_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='cleaning_button'>Cleaning</div>
        <textarea class="category_input" cols="40" id="cleaning_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='events_button'>Events</div>
        <textarea class="category_input" cols="40" id="events_input" name="worker[gender]" rows="2"></textarea>
    </div>
</div>

<div class="row">
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='yard_button'>Yard</div>
        <textarea class="category_input" cols="40" id="yard_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='organizing_button'>Organizing</div>
        <textarea class="category_input" cols="40" id="organizing_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='tutoring_button'>Tutoring</div>
        <textarea class="category_input" cols="40" id="tutoring_input" name="worker[gender]" rows="2"></textarea>
    </div>
</div>

<div class="row">
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='painting_button'>Painting</div>
        <textarea class="category_input" cols="40" id="painting_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='tech_button'>Tech</div>
        <textarea class="category_input" cols="40" id="tech_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='anything_button'>Anything</div>
        <textarea class="category_input" cols="40" id="anything_input" name="worker[gender]" rows="2"></textarea>
    </div>
</div>

<div class='row'>
    <div class='col-sm-4'>
        <div>
            <div class='btn btn-default category_button' id='moving_button'>Moving</div>
            <textarea class="category_input" cols="40" id="moving_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='cleaning_button'>Cleaning</div>
            <textarea class="category_input" cols="40" id="cleaning_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='events_button'>Events</div>
            <textarea class="category_input" cols="40" id="events_input" name="worker[gender]" rows="2"></textarea>
        </div>
    </div>

    <div class='col-sm-4'>
        <div>
            <div class='btn btn-default category_button' id='yard_button'>Yard</div>
            <textarea class="category_input" cols="40" id="yard_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='organizing_button'>Organizing</div>
            <textarea class="category_input" cols="40" id="organizing_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='tutoring_button'>Tutoring</div>
            <textarea class="category_input" cols="40" id="tutoring_input" name="worker[gender]" rows="2"></textarea>
        </div>
    </div>

    <div class='col-sm-4'>
        <div>
            <div class='btn btn-default category_button' id='painting_button'>Painting</div>
            <textarea class="category_input" cols="40" id="painting_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='tech_button'>Tech</div>
            <textarea class="category_input" cols="40" id="tech_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='anything_button'>Anything</div>
            <textarea class="category_input" cols="40" id="anything_input" name="worker[gender]" rows="2"></textarea>
        </div>
    </div>
</div>

我正试图使CSS/jQuery正确，以便单击一个按钮可以使其文本字段下拉。这将导致下面的其他两行向下移动，但不幸的是，目前没有发生这种情况

下面是生成按钮和文本字段的Ruby/Haml代码（行/列类是引导类）：

以下是控制文本区域的

类别输入

类的CSS：

.category_input {
    width: 100%;
    resize: none;
    display: none;
}

下面是我用来隐藏和显示的jQuery（正在进行中，现在只用于“移动”按钮：

:javascript
  $(document).ready(function(){
    $("#moving_button").click(function(){
      $("#moving_input").toggle();
    });
  });

当“移动”的文本区域出现时，它将庭院和绘画按钮推到一边，如下所示：

<div class='row'>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='moving_button'>Moving</div>
        <textarea class="category_input" cols="40" id="moving_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='cleaning_button'>Cleaning</div>
        <textarea class="category_input" cols="40" id="cleaning_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='events_button'>Events</div>
        <textarea class="category_input" cols="40" id="events_input" name="worker[gender]" rows="2"></textarea>
    </div>
</div>

<div class="row">
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='yard_button'>Yard</div>
        <textarea class="category_input" cols="40" id="yard_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='organizing_button'>Organizing</div>
        <textarea class="category_input" cols="40" id="organizing_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='tutoring_button'>Tutoring</div>
        <textarea class="category_input" cols="40" id="tutoring_input" name="worker[gender]" rows="2"></textarea>
    </div>
</div>

<div class="row">
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='painting_button'>Painting</div>
        <textarea class="category_input" cols="40" id="painting_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='tech_button'>Tech</div>
        <textarea class="category_input" cols="40" id="tech_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='anything_button'>Anything</div>
        <textarea class="category_input" cols="40" id="anything_input" name="worker[gender]" rows="2"></textarea>
    </div>
</div>

<div class='row'>
    <div class='col-sm-4'>
        <div>
            <div class='btn btn-default category_button' id='moving_button'>Moving</div>
            <textarea class="category_input" cols="40" id="moving_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='cleaning_button'>Cleaning</div>
            <textarea class="category_input" cols="40" id="cleaning_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='events_button'>Events</div>
            <textarea class="category_input" cols="40" id="events_input" name="worker[gender]" rows="2"></textarea>
        </div>
    </div>

    <div class='col-sm-4'>
        <div>
            <div class='btn btn-default category_button' id='yard_button'>Yard</div>
            <textarea class="category_input" cols="40" id="yard_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='organizing_button'>Organizing</div>
            <textarea class="category_input" cols="40" id="organizing_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='tutoring_button'>Tutoring</div>
            <textarea class="category_input" cols="40" id="tutoring_input" name="worker[gender]" rows="2"></textarea>
        </div>
    </div>

    <div class='col-sm-4'>
        <div>
            <div class='btn btn-default category_button' id='painting_button'>Painting</div>
            <textarea class="category_input" cols="40" id="painting_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='tech_button'>Tech</div>
            <textarea class="category_input" cols="40" id="tech_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='anything_button'>Anything</div>
            <textarea class="category_input" cols="40" id="anything_input" name="worker[gender]" rows="2"></textarea>
        </div>
    </div>
</div>

移动下方应有一个文本区域，清洁和事件下方应有空白区域，底部两行的其他6个按钮仍应像以前一样排列在下方（现在3x2除外）

我不确定是否需要修改Ruby、CSS或jQuery来实现这一点。提前感谢您的帮助

编辑

Adding HTML output per request:

 <div class='row'>
                          <div class='col-sm-4'>
                            <div class='btn btn-default category_button' id='moving_button'>Moving</div>
                            <textarea class="category_input" cols="40" id="moving_input" name="worker[gender]" rows="2"></textarea>
                          </div>
                          <div class='col-sm-4'>
                            <div class='btn btn-default category_button' id='cleaning_button'>Cleaning</div>
                            <textarea class="category_input" cols="40" id="cleaning_input" name="worker[gender]" rows="2"></textarea>
                          </div>
                          <div class='col-sm-4'>
                            <div class='btn btn-default category_button' id='events_button'>Events</div>
                            <textarea class="category_input" cols="40" id="events_input" name="worker[gender]" rows="2"></textarea>
                          </div>
                          <div class='col-sm-4'>
                            <div class='btn btn-default category_button' id='yard_button'>Yard</div>
                            <textarea class="category_input" cols="40" id="yard_input" name="worker[gender]" rows="2"></textarea>
                          </div>
                          <div class='col-sm-4'>
                            <div class='btn btn-default category_button' id='organizing_button'>Organizing</div>
                            <textarea class="category_input" cols="40" id="organizing_input" name="worker[gender]" rows="2"></textarea>
                          </div>
                          <div class='col-sm-4'>
                            <div class='btn btn-default category_button' id='tutoring_button'>Tutoring</div>
                            <textarea class="category_input" cols="40" id="tutoring_input" name="worker[gender]" rows="2"></textarea>
                          </div>
                          <div class='col-sm-4'>
                            <div class='btn btn-default category_button' id='painting_button'>Painting</div>
                            <textarea class="category_input" cols="40" id="painting_input" name="worker[gender]" rows="2"></textarea>
                          </div>
                          <div class='col-sm-4'>
                            <div class='btn btn-default category_button' id='tech_button'>Tech</div>
                            <textarea class="category_input" cols="40" id="tech_input" name="worker[gender]" rows="2"></textarea>
                          </div>
                          <div class='col-sm-4'>
                            <div class='btn btn-default category_button' id='anything_button'>Anything</div>
                            <textarea class="category_input" cols="40" id="anything_input" name="worker[gender]" rows="2"></textarea>
                          </div>
                        </div>
                      </div>
                    </div>

为每个请求添加HTML输出：
移动
打扫
事件
院子
组织
辅导
绘画
技术人员
任何东西

由于评论中的帮助，我能够理解概念问题。我需要的是在每三个按钮后显示一个新的引导

。行

，这样三个按钮的每个水平分组实际上都在代码中的同一行。这将导致单击一个按钮将整行向下推。我感到非常高兴要实现这一点，请在Ruby代码中添加以下条件语句：

.row
  - Category.all.each do |cat|
    - if cat.id == 1 || cat.id == 4 || cat.id == 7  # Create new .row after every 3 buttons
      .row
    .col-sm-4
      .btn.btn-default.category_button{:id => "#{cat.name}_button"}= cat.name.capitalize
      = f.text_area :gender, rows: '2', id: "#{cat.name}_input", class: "category_input"

---

唯一缺少的是一种优雅的方式来预测新类别的添加。

正确，您需要使用3个不同的行，并根据列数管理要显示的行数

让它在这里工作

---

如果希望每行中的项目对齐，则需要将它们按如下方式排列成三行：

<div class='row'>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='moving_button'>Moving</div>
        <textarea class="category_input" cols="40" id="moving_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='cleaning_button'>Cleaning</div>
        <textarea class="category_input" cols="40" id="cleaning_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='events_button'>Events</div>
        <textarea class="category_input" cols="40" id="events_input" name="worker[gender]" rows="2"></textarea>
    </div>
</div>

<div class="row">
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='yard_button'>Yard</div>
        <textarea class="category_input" cols="40" id="yard_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='organizing_button'>Organizing</div>
        <textarea class="category_input" cols="40" id="organizing_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='tutoring_button'>Tutoring</div>
        <textarea class="category_input" cols="40" id="tutoring_input" name="worker[gender]" rows="2"></textarea>
    </div>
</div>

<div class="row">
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='painting_button'>Painting</div>
        <textarea class="category_input" cols="40" id="painting_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='tech_button'>Tech</div>
        <textarea class="category_input" cols="40" id="tech_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='anything_button'>Anything</div>
        <textarea class="category_input" cols="40" id="anything_input" name="worker[gender]" rows="2"></textarea>
    </div>
</div>

<div class='row'>
    <div class='col-sm-4'>
        <div>
            <div class='btn btn-default category_button' id='moving_button'>Moving</div>
            <textarea class="category_input" cols="40" id="moving_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='cleaning_button'>Cleaning</div>
            <textarea class="category_input" cols="40" id="cleaning_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='events_button'>Events</div>
            <textarea class="category_input" cols="40" id="events_input" name="worker[gender]" rows="2"></textarea>
        </div>
    </div>

    <div class='col-sm-4'>
        <div>
            <div class='btn btn-default category_button' id='yard_button'>Yard</div>
            <textarea class="category_input" cols="40" id="yard_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='organizing_button'>Organizing</div>
            <textarea class="category_input" cols="40" id="organizing_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='tutoring_button'>Tutoring</div>
            <textarea class="category_input" cols="40" id="tutoring_input" name="worker[gender]" rows="2"></textarea>
        </div>
    </div>

    <div class='col-sm-4'>
        <div>
            <div class='btn btn-default category_button' id='painting_button'>Painting</div>
            <textarea class="category_input" cols="40" id="painting_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='tech_button'>Tech</div>
            <textarea class="category_input" cols="40" id="tech_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='anything_button'>Anything</div>
            <textarea class="category_input" cols="40" id="anything_input" name="worker[gender]" rows="2"></textarea>
        </div>
    </div>
</div>

移动
打扫
事件
院子
组织
辅导
绘画
技术人员
任何东西

如果希望列保持紧凑，并且每行中的项目不需要对齐，请将它们按如下方式排列在三列中：

<div class='row'>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='moving_button'>Moving</div>
        <textarea class="category_input" cols="40" id="moving_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='cleaning_button'>Cleaning</div>
        <textarea class="category_input" cols="40" id="cleaning_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='events_button'>Events</div>
        <textarea class="category_input" cols="40" id="events_input" name="worker[gender]" rows="2"></textarea>
    </div>
</div>

<div class="row">
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='yard_button'>Yard</div>
        <textarea class="category_input" cols="40" id="yard_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='organizing_button'>Organizing</div>
        <textarea class="category_input" cols="40" id="organizing_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='tutoring_button'>Tutoring</div>
        <textarea class="category_input" cols="40" id="tutoring_input" name="worker[gender]" rows="2"></textarea>
    </div>
</div>

<div class="row">
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='painting_button'>Painting</div>
        <textarea class="category_input" cols="40" id="painting_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='tech_button'>Tech</div>
        <textarea class="category_input" cols="40" id="tech_input" name="worker[gender]" rows="2"></textarea>
    </div>
    <div class='col-sm-4'>
        <div class='btn btn-default category_button' id='anything_button'>Anything</div>
        <textarea class="category_input" cols="40" id="anything_input" name="worker[gender]" rows="2"></textarea>
    </div>
</div>

<div class='row'>
    <div class='col-sm-4'>
        <div>
            <div class='btn btn-default category_button' id='moving_button'>Moving</div>
            <textarea class="category_input" cols="40" id="moving_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='cleaning_button'>Cleaning</div>
            <textarea class="category_input" cols="40" id="cleaning_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='events_button'>Events</div>
            <textarea class="category_input" cols="40" id="events_input" name="worker[gender]" rows="2"></textarea>
        </div>
    </div>

    <div class='col-sm-4'>
        <div>
            <div class='btn btn-default category_button' id='yard_button'>Yard</div>
            <textarea class="category_input" cols="40" id="yard_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='organizing_button'>Organizing</div>
            <textarea class="category_input" cols="40" id="organizing_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='tutoring_button'>Tutoring</div>
            <textarea class="category_input" cols="40" id="tutoring_input" name="worker[gender]" rows="2"></textarea>
        </div>
    </div>

    <div class='col-sm-4'>
        <div>
            <div class='btn btn-default category_button' id='painting_button'>Painting</div>
            <textarea class="category_input" cols="40" id="painting_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='tech_button'>Tech</div>
            <textarea class="category_input" cols="40" id="tech_input" name="worker[gender]" rows="2"></textarea>
        </div>
        <div>
            <div class='btn btn-default category_button' id='anything_button'>Anything</div>
            <textarea class="category_input" cols="40" id="anything_input" name="worker[gender]" rows="2"></textarea>
        </div>
    </div>
</div>

移动
打扫
事件
院子
组织
辅导
绘画
技术人员
任何东西

这些列是如何构建的？如果是TABLE，它会将其向下推，因为它们共享同一行。您可能需要设计一些三列DIV业务，这样它们就不会相互影响。通过谷歌搜索三列CSS布局来了解这一点。请从Ruby发布生成的HTML。查看页面和pa的源代码ste it.我想这是因为从技术上讲这都是一个引导。行和按钮实际上是列…所以我认为你是对的，@Jason。问题是如果我要用Ruby自动生成按钮，我该怎么做。每个loop@Abhi我添加了生成的HTML