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

Question

我有9个按钮排列在3x3平方。用户应该能够单击一个按钮以使text_field显示在下面。以下是所有text_fields显示的内容：

我给每个文本字段一个包含display: none的类，以便在页面加载时按钮组如下所示：

我正在尝试将CS​​S / jQuery设置为正确，以便单击一个按钮会导致其文本字段下拉。这应该会导致下面的其他两行向下移动，但遗憾的是，此刻并未发生这种情况。

这是生成按钮和文本字段的Ruby / Haml代码（行/列类是Bootstrap）：

.row
  - Category.all.each do |cat|
    .col-sm-4
      .btn.btn-default.category_button{:id => "#{cat.name}_button"}= cat.name.capitalize
      = f.text_area :categories, rows: '2', id: "#{cat.name}_input", class: "category_input"

以下是控制text_areas的category_input类的CSS：

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

这是我用来隐藏和显示的jQuery（正在进行中，仅适用于“移动”按钮：

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

当出现“Moving”的text_area时，它会将Yard和Painting按钮推到这边：

清洁和事件下面的移动，空白空间下面应该有一个text_area，而底部两行中的其他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>

Answer 1

由于评论中的帮助，我能够掌握概念问题。我需要的是每三个按钮后出现一个新的Bootstrap .row，这样三个按钮的每个水平分组实际上都在代码的同一行。这将导致单击一个按钮将整行向下推。我能够通过在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"

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

Answer 2

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

让它在这里工作

http://jsbin.com/hipoyusedeci/1/edit?html,css,js,output

http://jsbin.com/hipoyusedeci/1/

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