Question

我有一个由jQuery函数显示和隐藏的div。问题是div＆＃34;移动＆＃34;当我点击按钮时，不在中心附近。为什么会这样？我该如何防止这种情况？

HTML代码（BootStrap 3）：

<div class='input-group-btn'>
    <button type="button" id='search' class="btn btn-primary">
        <span class="glyphicon glyphicon-search" aria-hidden="true" />
    </button>
</div>
<form method='POST' style='display:inline;'/>
<div class="input-group" id="adv-search">
    <input type="text" class="form-control" name='genericResearch' placeholder="Cerca" />
    <div class="input-group-btn">
        <div class="btn-group" role="group">
            <div class="dropdown dropdown-lg">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <span class="caret"></span>
                </button>
                <button type="submit" name='search' class="btn btn-primary">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
</form>
<div class="dropdown-menu dropdown-menu-right" role="menu">
    <form class="form-horizontal" role="form" method='POST'>
    <div class="form-group">
        <table class='table'>
            <tr>
                <td colspan='2'>
                    <select name='filter' class="form-control">
                        <option value=''>Limita a...</option>
                        <option value="all">Niente / Cerca tutto</option>
                        <option value="ingrediente">Ingredienti</option>
                        <option value="componente">Componenti</option>
                        <option value="pietanza">Pietanze</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan='2'>
                    <input class="form-control" name='nome' type="text" placeholder='Nome' />
                </td>
            </tr>
            <tr>
                <td>
                    <select name='quantity' class='form-control'>
                        <option value=''>Metodo di Confronto</option>
                        <option value='more'>Maggiore di...</option>
                        <option value='equal'>Precisamente...</option>
                        <option value='less'>Minore di...</option>
                    </select>
                </td>
                <td>
                    <input type='number' id='quantita' class='form-control' name='qvalue' placeholder='Quantità' />
                </td>
            </tr>
        </table>
    </div>
    <button type="submit" name='search' class="btn btn-primary">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    </button>
    </form>
                    </div>
                    </div>
                </div>
            </div>
        </div>

jQuery代码：

$("#search").click(function(){
    $("#adv-search").toggle(1000);
});

CSS代码：

.dropdown.dropdown-lg .dropdown-menu {
    margin-top: -1px;
    padding: 6px 20px;
}
.input-group-btn .btn-group {
    display: flex !important;
}
.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}
.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}
.form-group .form-control:last-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

@media screen and (min-width: 768px) {
    #adv-search {
        width: 500px;
        margin: 0 auto;
    }
    .dropdown.dropdown-lg {
        position: static !important;
    }
    .dropdown.dropdown-lg .dropdown-menu {
        min-width: 500px;
    }
}

Answer 1

原因是$("#adv-search").toggle(1000);逐渐显示元素，导致其宽度在外观中发生变化，浏览器的作用是在元素开始出现时使元素居中，然后当宽度停止变化时调整元素位置

编辑：您发布的HTML代码很乱，您有一些不匹配的代码例如，您使用的是空表单标记

<form method='POST' style='display:inline' />

奇怪的<div>位置（在jQuery函数中移动）

1 个答案: