Question

我试图在单击选项后折叠悬停的下拉菜单，并在用户“悬停”在该菜单上时再次显示该下拉菜单。我已经尝试了一切，但似乎没有任何效果。现在，每次用户单击选项时，下拉菜单选项都不会消失。我试图在单击下拉菜单后“隐藏”，然后强制下拉菜单显示用户何时将鼠标悬停在菜单上但无济于事。

$(function() {

  $('.dropdown ul li').on('click', function() {


    //$(".dropdown ul li").hide();
    $(this).toggleClass('data-value');
    var label = $(this).parent().parent().children('label');
    label.attr('data-value', $(this).attr('data-value'));
    label.html($(this).html());
    $(this).children().slideUp();
    $(this).parent().children('.selected').removeClass('selected');
    $(this).addClass('selected');
    // When you hover, call   $(".dropdown ul li").show();

  });


});

CSS : .wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.dropdown {
  margin: 0px auto;
  position: relative;
  width: 275px;
  max-width: 400px;
  margin-bottom: 20px;
}

.dropdown label {
  display: block;
  padding: 8px 16px;
  background: #EA8C02;
  color: #FAFAFA;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.dropdown ul {
  list-style: none;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.dropdown ul li {
  padding: 0px 16px;
  background: #DDD;
  color: #343838;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
  height: 0px;
  overflow: hidden;
  cursor: pointer;
  transition: height 0.1s linear 0s;
}

.dropdown ul li:hover,
.dropdown ul li.selected {
  background: #00B4CC;
  color: #FAFAFA;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.dropdown:hover ul li {
  padding: 8px 16px;
  height: 34px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">

  <div class="dropdown">
    <label data-value="">Discount Amount</label>
    <ul>
      <li data-value="1">$5.00</li>
      <li data-value="2">10.00</li>
      <li data-value="3">$15.00</li>
    </ul>
  </div>

</div>

Answer 1

答案是

function start(){
var x =document.getElementByTagName("p");
x.style.color="red";
}

a:active {
  background-color: yellow;
}

<a href="#">hello world im active </a>
<p onclick="start();">hello im onclick </P>

Answer 2

将您的function更新为此

 $(function () {
        $('.dropdown ul li').on('click', function () {
            $('.dropdown ul li').css({padding: '0px', height: '0px'});
        });

        // Reset style

        $('.dropdown ul').on('mouseleave', function () {
            $('.dropdown ul li').removeAttr("style");
        });
    });

请参见下面的工作片段。干杯！

   
   $(function () {
        $('.dropdown ul li').on('click', function () {
            $('.dropdown ul li').css({padding: '0px', height: '0px'});
        });
        
        // Reset style
        
        $('.dropdown ul').on('mouseleave', function () {
            $('.dropdown ul li').removeAttr("style");
        });
    });

.wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.dropdown {
  margin: 0px auto;
  position: relative;
  width: 275px;
  max-width: 400px;
  margin-bottom: 20px;
}

.dropdown label {
  display: block;
  padding: 8px 16px;
  background: #EA8C02;
  color: #FAFAFA;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.dropdown ul {
  list-style: none;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.dropdown ul li {
  padding: 0px 16px;
  background: #DDD;
  color: #343838;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
  height: 0px;
  overflow: hidden;
  cursor: pointer;
  transition: height 0.1s linear 0s;
}

.dropdown ul li:hover,
.dropdown ul li.selected {
  background: #00B4CC;
  color: #FAFAFA;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.dropdown:hover ul li {
  padding: 8px 16px;
  height: 34px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="wrapper">

  <div class="dropdown">
    <label data-value="">Discount Amount</label>
    <ul>
      <li data-value="1">$5.00</li>
      <li data-value="2">10.00</li>
      <li data-value="3">$15.00</li>
    </ul>
  </div>
</div>

单击选项后折叠悬停下拉菜单

2 个答案: