javascript - 在按钮列表中单击的按钮下滑动 div

Question

我有一个部分标签，其中包含一个由列表按钮组成的 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 滑动

Answer 1

这是我想出的:

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

Here is the JSFiddle demo