在按钮列表中单击的按钮下滑动 div答案

【问题标题】：Slide div under button clicked within a list of buttons在按钮列表中单击的按钮下滑动 div
【发布时间】：2015-10-07 02:14:22
【问题描述】：

我有一个部分标签，其中包含一个由列表按钮组成的 div。我在此按钮 div 中有一个隐藏的 div，我想在单击的按钮下向下滑动，该按钮将其下方的其余内容向下推。我该怎么办？我曾尝试使用 CSS position : relative 但我认为我没有正确使用它。这是我的 HTML 代码：

    <section style="float: left;" id="querySelection">

                    <div id="queryButtons">


                    <input class="btn btn-info net-man" id="zStory11" type="submit"
                        value="Top 10 Market/Operator/Cell ID combinations" />

                    <input class="btn btn-info net-man" id="failuresPerDeviceBtn" type="submit"
                        value="Failures per Device" />

                    <input class="btn btn-info cust-rep supp-eng net-man" id="failuresPerImsiBtn" type="submit"
                        value="Failures per IMSI" />

                    <input class="btn btn-info cust-rep net-man supp-eng" id="st6_CauseCodesPerImsiBtn" type="submit"
                        value="Failure Cause Codes per IMSI" />

                    <input class="btn btn-info supp-eng net-man" id="imsisPerFailureClassBtn" 
                        type="submit" value="IMSI's Per Failure Class"/>

                    <input class="btn btn-info net-man" id="top10ImsiCallFailsTimePeriod" type="submit"
                        value="Top 10 IMSIs with Call Failures" />

                    <div id="queryPanel">

                    </div>
                 </div>

    </section>

我将如何在单击的按钮下方滑动“queryPanel”div。这是单击按钮时使用的 JavaScript。

   if($('#queryPanel').is(':visible')){
       $('#queryPanel').slideToggle("fast");
    }
    else{
        $("#queryPanel").slideToggle("slow");
    }

目前，这会在“queryButtons”div 下滑动“queryPanel”div，这不是所需的结果

【问题讨论】：

您的 html 中似乎缺少一大段代码。我们也可以得到css。
顶部的section标签不见了
是的，你不能从这样的部分开始。部分不是包装器。仍然需要 CSS
编辑了这个问题，希望它能澄清更多。我删除了section标签，结果还是一样
这可能很容易修复，但我们需要查看更多代码和/或 JSfiddle。

标签： javascript jquery html css

【解决方案1】：

这是我想出的：

$(".net-man").click(function(){
    var elem = $("#queryPanel");
    $("#queryPanel").remove();
    elem.insertAfter($(this));
    $("#queryPanel").hide().slideToggle("fast");
});

Here is the JSFiddle demo

【讨论】：