我有一个由jQuery函数显示和隐藏的div。问题是div"移动"当我点击按钮时,不在中心附近。 为什么会这样?我该如何防止这种情况?
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;
}
}
答案 0 :(得分:2)
原因是$("#adv-search").toggle(1000);
逐渐显示元素,导致其宽度在外观中发生变化,浏览器的作用是在元素开始出现时使元素居中,然后当宽度停止变化时调整元素位置
编辑:您发布的HTML代码很乱,您有一些不匹配的代码 例如,您使用的是空表单标记
<form method='POST' style='display:inline' />