我的jquery代码在bootstrap中不起作用

时间:2016-10-02 13:02:01

标签: javascript jquery html twitter-bootstrap

我的jquery代码在bootstrap中不起作用。我有一些列,我想把提交表格放在特定的列中但是当我使用表单标签时,我的jquery不会工作。

    <body>
    <form>
    <div class="row" id="row1">
        <div class="col-sm-6" id="col-1">
            <button id="btn">hide me</button>
        </div>
        <div class="col-sm-6" id="col-2">

        </div>
    </div>
    <div class="row">
        <div class="col-sm-6" id="col-3">

        </div>
        <div class="col-sm-6" id="col-4">

        </div>
    </div>
    </form>
</body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
 <script type="text/javascript">
            $(document).ready(function(){
        $("#btn").click(function(){
            $("#row1").slideUp("slow");
        });
    });
 </script>

1 个答案:

答案 0 :(得分:2)

您需要使用preventDefault(),如下所示:

$(document).ready(function(){
    $("#btn").click(function(e){
        e.preventDefault();
        $("#row1").slideUp("slow");
    });
});

当您放置form标记并且其中包含button标记时,默认操作是提交表单。因此,您需要先使用preventDefault()来阻止它。

如果它解决了这个问题,请告诉我。