ASP.NET(Web表单)下拉菜单显示并隐藏在javascript函数上

时间:2017-03-31 08:34:08

标签: javascript css asp.net webforms

我在客户端使用功能有问题,如下拉菜单。我的菜单刚刚显示并在功能重新加载后隐藏。 我认为我的功能是重载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;
}

请帮助..

1 个答案:

答案 0 :(得分:0)

<asp:Button>上,更改此内容:

OnClientClick="myFunction2()"

OnClientClick="myFunction2(); return false;"

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

当您单击<asp:Button> .NET时,首先调用任何OnClientClick方法,然后继续执行正常的按钮单击处理(包括回发到服务器),会发生什么。即使您未向OnClick方法提供按钮,也会出现这种情况。您可以通过确保客户端脚本返回false来停止回发。