ASP.NET (web forms) 下拉菜单显示和隐藏javascript函数

Question

我在客户端使用下拉菜单等功能时遇到问题。我的菜单刚刚显示并在功能重新加载后隐藏。 我认为我的功能是重新加载 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（我也使用引导程序）：

.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;
}

请帮忙..

Answer 1

在<asp:Button> 上，更改：

OnClientClick="myFunction2()"

到

OnClientClick="myFunction2(); return false;"

我注释掉了 javascript Load() 方法，因为它没有定义并导致脚本崩溃。

发生的情况是，当您单击 <asp:Button> 时，.NET 首先调用任何 OnClientClick 方法，然后继续执行正常的按钮单击处理（包括回发到服务器）。即使您没有为按钮提供OnClick 方法，也会发生这种情况。您可以通过确保客户端脚本返回 false 来阻止回发。