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

Question

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

我查看了有关此问题的所有提要，但似乎都不起作用，我们将不胜感激。

$(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
}

<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>

标签： jquerycss

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>