Форум

drkrol · #1 (**permalink**) 29.01.2017, 13:41

Здравствуйте. Пытаюсь сделать простой свой select.
Работать должен так:
Жмёшь на него -> появляется список
Выбираешь пункт списка -> список закрывается
Жмёшь вне списка -> список закрывается
Жму на открытый селект снова -> список закрывается
А у меня вот так:
Жму -> появляется
Выбираю -> закрывается
Жму вне -> закрывается
Жму по открытому селекту -> закрывается и через секунду открывается

Вот код:
https://jsfiddle.net/34h8d3ut/2/

Как сделать, чтобы при клике по открытому селекту, но не закрывался-открывался, а просто закрывался?

рони · #2 (**permalink**) 29.01.2017, 14:48

drkrol,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .list-select{
    display:none;
  }
 .a-select:hover, .a-select.active, .list-select:hover .a-select:hover.active {
  background-color: #EAEAEA;
}
 .list-select:hover .a-select.active{
   background-color:  transparent;
 }
  .a-select.active{
    border: 1px dashed #000000;

  }
 .select {
  position: relative;
  height: 50px;
  width: 240px;
  border:1px solid #ccc;
  cursor: pointer;
}
 .list-select {
  position: absolute;
  width: 100%;
  top: 51px;
  z-index: 5;
  background-color: #F0F8FF;
}
.text-select, .a-select {
  border-radius: 8px;
  line-height: 50px;
  padding-left: 20px;
}

 .select:nth-child(2){
   margin-left: 300px;
   margin-top: -54px;
 }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $(".select").on("click", function(event) {
        var el = $(event.target),
            list = $(".list-select", this),
            a = $(".a-select", this).not(el),
            txt = $(".text-select", this);
        el.is(".a-select") && txt.text(el.addClass("active").text()) && a.removeClass("active");
        list.slideToggle()
    });
    $(document).click(function(event) {
        if (!$(event.target).closest(".select").length) $(".select .list-select").slideUp()
    })
});
  </script>
</head>

<body>
<div class="select">
  <div class="text-select">Выбирай</div>
  <div class="list-select ">
    <div class="a-select">Первый</div>
    <div class="a-select">Второй</div>
    <div class="a-select">Третий</div>
  </div>
</div>
<div class="select">
  <div class="text-select">Выбирай</div>
  <div class="list-select ">
    <div class="a-select">Первый</div>
    <div class="a-select">Второй</div>
    <div class="a-select">Третий</div>
  </div>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript