Question

我有一个用作导航栏的按钮有问题，单击该按钮可切换下拉菜单。我现在希望在浏览下拉菜单或完全离开下拉菜单时保持按钮悬停效果，直到再次关闭下拉菜单。

我查看了所有有关此问题的供稿，但似乎都无效，您的帮助将不胜感激。

Option

$(document).ready(function() {

  $(document).on("click", function(event) {
    var $trigger = $(".dropdown");
    if ($trigger !== event.target && !$trigger.has(event.target).length) {
      $("#myDropdown").slideUp("slow");
    }
  });
  $("#dropdown-content").change(function() {
    $(".one").hide();
  });
});

.dropdown {
  width: 60px;
  height: 120px;
  top: 20px;
  left: 40px;
  position: relative;
  display: inline-block;
}

.dropbtn div {
  height: 8px;
  background-color: #808080;
  margin: 8px 0;
  border-radius: 25px;
  position: relative;
  z-index: 20;
}

.dropbtn {
  border: none;
  background-color: #fff;
  cursor: pointer;
}

.one {
  width: 8px;
  transition: 0.7s;
}

.two {
  width: 8px;
  transition: 0.9s;
}

.three {
  width: 8px;
  transition: 1.1s;
}

.dropbtn:hover .one {
  width: 60px;
}

.dropbtn:hover .two {
  width: 60px;
}

.dropbtn:hover .three {
  width: 60px;
}

.dropbtn:focus {
  outline: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd
}

Answer 1

我想说的最简单的阻止汉堡菜单崩溃的方法是添加一个将宽度设置为60px的类，并在单击后将其删除，以达到理想的效果。

我已经对您的代码段做了一些修改。

$(document).ready(function() {
  var $trigger = $(".dropdown"); // Cache the element

  $(document).on("click", function(event) {
    $trigger.addClass('active'); // Add the class that sets the width to the children elements
    if ($trigger !== event.target && !$trigger.has(event.target).length) {
      $("#myDropdown").slideUp("slow");
      $trigger.removeClass('active'); // Remove the class to return it to the original width
    }
  });
  $("#dropdown-content").change(function() {
    $(".one").hide();
  });
});

.dropdown {
  width: 60px;
  height: 120px;
  top: 20px;
  left: 40px;
  position: relative;
  display: inline-block;
}

.dropbtn div {
  height: 8px;
  background-color: #808080;
  margin: 8px 0;
  border-radius: 25px;
  position: relative;
  z-index: 20;
}

.dropbtn {
  border: none;
  background-color: #fff;
  cursor: pointer;
}

.one {
  width: 8px;
  transition: 0.7s;
}

.two {
  width: 8px;
  transition: 0.9s;
}

.three {
  width: 8px;
  transition: 1.1s;
}

.dropbtn:hover .one {
  width: 60px;
}

.dropbtn:hover .two {
  width: 60px;
}

.dropbtn:hover .three {
  width: 60px;
}

.active div {
  width: 60px; /* This will set the children div width for you */
 }

.dropbtn:focus {
  outline: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn" onclick="$('#myDropdown').slideToggle('slow');"> <!--  onclick="$('#myDropdown').slideToggle('slow');" -->
					<div class="one"></div>
					<div class="two"></div>
					<div class="three"></div>
				</button>

  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Answer 2

您可以添加一个类onClick来保持悬停状态：

$(document).ready(function() {

  $(document).on("click", function(event) {
    var $trigger = $(".dropdown");
    if ($trigger !== event.target && !$trigger.has(event.target).length) {
      $("#myDropdown").slideUp("slow");
      $('.dropbtn').removeClass('active');
    }
  });
  $("#dropdown-content").change(function() {
    $(".one").hide();
  });
});

.dropdown {
  width: 60px;
  height: 120px;
  top: 20px;
  left: 40px;
  position: relative;
  display: inline-block;
}

.dropbtn div {
  height: 8px;
  background-color: #808080;
  margin: 8px 0;
  border-radius: 25px;
  position: relative;
  z-index: 20;
}

.dropbtn {
  border: none;
  background-color: #fff;
  cursor: pointer;
}

.one {
  width: 8px;
  transition: 0.7s;
}

.two {
  width: 8px;
  transition: 0.9s;
}

.three {
  width: 8px;
  transition: 1.1s;
}

.dropbtn:hover .one,
.dropbtn.active .one{
  width: 60px;
}

.dropbtn:hover .two,
.dropbtn.active .two{
  width: 60px;
}

.dropbtn:hover .three,
.dropbtn.active .three{
  width: 60px;
}

.dropbtn:focus {
  outline: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn" onclick="$('#myDropdown').slideToggle('slow');$(this).toggleClass('active');"> 
					<div class="one"></div>
					<div class="two"></div>
					<div class="three"></div>
				</button>

  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

不再悬停时，保持css悬停效果

2 个答案: