jquery – 保持css悬停效果,不再悬停时

我稍微修改了你的代码片段.

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