HTML - 如何在按钮单击时隐藏下拉列表内容？

时间：2016-11-29 05:46:21

标签： javascript html css twitter-bootstrap drop-down-menu

我已将一个下拉菜单集成到我的搜索栏中（使用Bootstrap）

.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: 1000px) {
  #adv-search {
    width: 1110px;
    margin: 0 auto;
  }
  .dropdown.dropdown-lg {
    position: static !important;
  }
  .dropdown.dropdown-lg .dropdown-menu {
    min-width: 1110px;
  }
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<body>
  <div class="container">
    <div class="row">

      <div class="input-group" id="adv-search">
        <input type="text" class="form-control" placeholder="Search" id="searchBar" />

        <div class="input-group-btn">
          <div class="btn-group" role="group">

            <button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000">
              <span class="glyphicon glyphicon-remove"></span>
            </button>

            <div class="dropdown dropdown-lg">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>

              <div class="dropdown-menu dropdown-menu-right" role="menu">
                <form class="form-horizontal" role="form" style="font-family:Calibri;font-size:16px;background-color:#F7F7F7">
                  <br />

                  <div class="form-group row">
                    <label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
                    <div class="col-md-2">
                      <input class="form-control" type="text" id="txtRequestNo" />
                    </div>

                    <label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
                    <div class="col-md-2">
                      <input class="form-control" type="text" id="txtReferenceNo" />
                    </div>

                    <label for="CreatedBy" class="col-xs-2 col-form-label">Created By</label>
                    <div class="col-md-2">
                      <input class="form-control" type="text" id="txtCreatedBy" />
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

下拉列表中的文本框充当搜索过滤器。 目前，除非用户点击该菜单之外，否则该下拉菜单不会隐藏。因此它阻止了其他内容。

我正在努力实现以下目标： 如果我在文本框中输入特定数据并按Enter键，则应隐藏下拉内容。

e.g。我输入1234作为搜索词insisde RequestNo。和点按Enter 整个下拉列表应隐藏（或折回） （我不需要鼠标悬停来实现这一点）

我应该对我的代码做些什么补充来实现这个目标？

1 个答案:

答案 0 :(得分：1)

您可以使用keycode在dropdown按

关闭enter 
$('.dropdown-menu.dropdown-menu-right').keypress(function (e) {
    if (e.keyCode == 13) {
      $('.dropdown.dropdown-lg').removeClass('open');
    }
});


$('.dropdown-menu.dropdown-menu-right').keypress(function(e) {
  if (e.keyCode == 13) {
    $('.dropdown.dropdown-lg').removeClass('open');
  }
});
.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: 1000px) {
  #adv-search {
    width: 1110px;
    margin: 0 auto;
  }
  .dropdown.dropdown-lg {
    position: static !important;
  }
  .dropdown.dropdown-lg .dropdown-menu {
    min-width: 1110px;
  }
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<body>
  <div class="container">
    <div class="row">

      <div class="input-group" id="adv-search">
        <input type="text" class="form-control" placeholder="Search" id="searchBar" />

        <div class="input-group-btn">
          <div class="btn-group" role="group">

            <button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000">
              <span class="glyphicon glyphicon-remove"></span>
            </button>

            <div class="dropdown dropdown-lg">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>

              <div class="dropdown-menu dropdown-menu-right" role="menu">
                <form class="form-horizontal" role="form" style="font-family:Calibri;font-size:16px;background-color:#F7F7F7">
                  <br />

                  <div class="form-group row">
                    <label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
                    <div class="col-md-2">
                      <input class="form-control" type="text" id="txtRequestNo" />
                    </div>

                    <label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
                    <div class="col-md-2">
                      <input class="form-control" type="text" id="txtReferenceNo" />
                    </div>

                    <label for="CreatedBy" class="col-xs-2 col-form-label">Created By</label>
                    <div class="col-md-2">
                      <input class="form-control" type="text" id="txtCreatedBy" />
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

相关问题
最新问题