Question

我有一个section标签，其中包含一个由列表按钮组成的div。我在这个按钮div中有一个隐藏的div，我想在点击的按钮下滑下来，按下它下面的其余内容。我怎么会这样呢？我尝试过使用CSS位置：相对但我不认为我正确使用它。这是我的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

在按钮列表中单击按钮下方滑动div

1 个答案: