Кнопка dropdown (desplegable) hoverable

У меня есть desplegable, который открывается, когда я перемещаю мышь, сверху сделанную с 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>

Но я столкнулся с problmea и esque, хотя я кликну в неударе в лунку, чтобы писать и достала мышь вне контента dropdown, этот исчезает, и мне нужно, чтобы, если я он кликаю внутри, уже я не исчез, что только скрыл, если я переместил мышь сверху и нет clickado ничего.

4
задан 18.02.2017, 06:06
1 ответ

Используя jQuery ты можешь делать следующее:

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

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

Выбираем inputs внутри контента тебя dropdown и распределяем им два события. focus, когда будут сфокусированы input и blur, когда он потеряет подход.

Мы Используем ее funciГіn parents(), чтобы пробегать DOM, но с селектором для того, чтобы он прибыл в .dropdown-content, и despuГ©s мы используем toggleClass, чтобы добавлять и перемещать класс завися, если есть подход или нет.

Класс:

.open {
  display: block;
}

Я РАСКАЛЫВАЮ НА ЧАСТИ CГ “Я ГОВОРЮ:

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
ответ дан 24.11.2019, 13:01
  • 1
    Я не функционирует это... Я предполагаю, что он может быть, потому что у класса dropdown content есть один display:none... Не s и # 233; если podr и # 237; чтобы помещать, чем, кликнув внутри контента, хотя оно не будет состоять внутри неудара в лунку в том, чтобы функционировать и # 237; в каким-то образом... – Pavlo B. 21.10.2016, 10:29
  • 2
    Aseg и # 250; rate, что твой класс .open был под .dropdown-content в файле CSS. Если проблема сохраняется, старайся использовать .open { display: block!important; }, и если схвати, и # 237; оно ты функционирует означает, что это проблема specificity. – Ricky 21.10.2016, 16:31
  • 3
    Если действительно это проблема specificity, то, что ты можешь делать, - это вместо того, чтобы заявлять и #250; nicamente .open использует .dropdown-content.open { display: block; }. – Ricky 21.10.2016, 16:35

Теги

Похожие вопросы