Home / Questions / 28940
Accepted
Pavlo B.
Asked: 2020-10-21 03:15:10 +0800 CST 2020-10-21 03:15:10 +0800 CST

可悬停的下拉按钮

  • 772

当我将鼠标悬停在使用 HTML 和 CSS 制作的下拉菜单上时，我会打开一个下拉菜单，如下所示：

.dropdown {
    position: relative;
    display: inline-block;
}
.dropbtn {
    height:30px;
    width:160px;
    background-color: #da291c;
    color: #ffffff;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #653734;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 5px 7px;
}

.dropdown:hover .dropdown-content {
    display: block;
}
<div class="dropdown">
					<button class="dropbtn"><?php echo $lang['topbar_string_1']; ?></button>
	<div class="dropdown-content">
		<div class="row no-margin no-padding">
			<form>
				<div class="col-xs-12 no-padding ">
					<label class="white-text"><?php echo $lang['topbar_string_2']; ?></label>
					<input type="text" class="form-control"/>
				</div>
				<div class="col-xs-12 no-padding ">
					<label class="white-text"><?php echo $lang['topbar_string_3']; ?></label>
					<input type="password" class="form-control"/>
				</div>
				<div class="col-xs-12 no-padding ">
					<button class="my-btn btn-primary" type="submit"><?php echo $lang['topbar_string_4']; ?></button>
				</div>
				<div class="col-xs-12 no-padding ">
					<a class="white-text" href="#"><?php echo $lang['topbar_string_5']; ?></a>
				</div>
			</form>
		</div>
	</div>
</div>

但是我遇到了一个问题，即使我单击输入进行写入并将鼠标移出下拉列表的内容，它也会消失，我需要如果我单击它它不再消失，那只有当我将鼠标悬停在它上面并且没有点击任何东西时它才会消失。

html

1 Answers

  1. Best Answer

    使用jQuery，您可以执行以下操作：

    var inputs = $(".dropdown-content input");

inputs.on("focus blur", function() {
  $(this).parents(".dropdown-content").toggleClass("open");
});

    我们inputs在您的内容中选择dropdown并为它们分配两个事件。focus当他专注时input，blur当他失去专注时。

    我们使用该函数parents()来遍历 DOM，但使用选择器来获取.dropdown-content，然后toggleClass根据是否有焦点来添加和删除类。

    班级：

    .open {
  display: block;
}

    代码片段：

    var inputs = $(".dropdown-content input");

inputs.on("focus blur", function() {
  $(this).parents(".dropdown-content").toggleClass("open");
});
    .dropdown {
  position: relative;
  display: inline-block;
}
.dropbtn {
  height: 30px;
  width: 160px;
  background-color: #da291c;
  color: #ffffff;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #653734;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 5px 7px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.open {
  display: block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn">
    <?php echo $lang[ 'topbar_string_1']; ?>
  </button>
  <div class="dropdown-content">
    <div class="row no-margin no-padding">
      <form>
        <div class="col-xs-12 no-padding ">
          <label class="white-text">
            <?php echo $lang[ 'topbar_string_2']; ?>
          </label>
          <input type="text" class="form-control" />
        </div>
        <div class="col-xs-12 no-padding ">
          <label class="white-text">
            <?php echo $lang[ 'topbar_string_3']; ?>
          </label>
          <input type="password" class="form-control" />
        </div>
        <div class="col-xs-12 no-padding ">
          <button class="my-btn btn-primary" type="submit">
            <?php echo $lang[ 'topbar_string_4']; ?>
          </button>
        </div>
        <div class="col-xs-12 no-padding ">
          <a class="white-text" href="#">
            <?php echo $lang[ 'topbar_string_5']; ?>
          </a>
        </div>
      </form>
    </div>
  </div>
</div>

    • 4