Раскрывающееся всплывающее меню после щелчка

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>