我在客户端使用功能有问题,如下拉菜单。我的菜单刚刚显示并在功能重新加载后隐藏。 我认为我的功能是重载2次。 .................................................. .............................
我的代码:
.aspx的
<asp:Button ID="advancedSearchOptions" runat="server" Text="Sz" CausesValidation="False"
Visible="true" class="btn btn-primaryx dropdown-toggle" data-toggle="dropdown" aria-expanded="false" OnClientClick="myFunction2()" />
<div id="divShow" class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
</form>
</div>
使用Javascript:
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction2() {
Load();
document.getElementById("divShow").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
matches = event.target.matches ? event.target.matches('.btn-primaryx') : event.target.msMatchesSelector('.btn-primaryx');
if (!matches) {
var dropdowns = document.getElementsByClassName("dropdown-menu");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
CSS(我也使用bootstrap):
.dropdown-toggle
{
border-top-right-radius:0;
border-bottom-right-radius:0
}
.btn-primaryx
{
color:#fff;
background-color:#eaf5ff;
border-color:#2e6da4;
height:36px;
}
.dropdown-menu{
position:absolute;
top:100%;left:0;
z-index:1000;
display:none;
float:left;
min-width:160px;
padding:5px 0;
margin:2px 0 0;
font-size:14px;
text-align:left;
list-style:none;
background-color:#fff;
-webkit-background-clip:padding-box;
background-clip:padding-box;
border:1px solid #ccc;
border:1px solid rgba(0,0,0,.15);
border-radius:4px;
-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);
box-shadow:0 6px 12px rgba(0,0,0,.175)
}
.show {
display:block;
}
请帮助..
答案 0 :(得分:0)
在<asp:Button>
上,更改此内容:
OnClientClick="myFunction2()"
到
OnClientClick="myFunction2(); return false;"
我注释掉了javascript Load()
方法,因为它没有定义并使脚本崩溃。
当您单击<asp:Button>
.NET时,首先调用任何OnClientClick
方法,然后继续执行正常的按钮单击处理(包括回发到服务器),会发生什么。即使您未向OnClick
方法提供按钮,也会出现这种情况。您可以通过确保客户端脚本返回false来停止回发。