Показать сообщение отдельно
  #5 (permalink)  
Старый 09.12.2018, 16:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

the_little,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .drop{
      display: none;
  }
  li.active{
       background-color: #D3D3D3;
  }
 body{
     display: flex;
 }
 .select{
     margin: 0 auto;
 }
 .slct.active{
     background-color: #EEE8AA;
     border-radius: 8px;
     padding: 4px 6px;
 }

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

  <script>
$(function() {
    $(".select").each(function(i, parent) {
        var a = $(".slct", parent);
        var drop = $(".drop", parent);
        var input = $("input", parent);
        $(parent).on("click", ".slct, li", function(event) {
            event.preventDefault();
            drop.slideToggle(800, function() {
                $(this).is(":hidden") && a.removeClass("active")
            });
            $(this).addClass("active");
            if ($(this).is("li")) {
                event.stopPropagation();
                $(this).siblings().removeClass("active");
                var title = this.textContent.trim();
                a.text(title);
                input.val(title)
            }
        })
    }).find("li:first").addClass("active");
    $(document).click(function(event) {
        $(event.target).closest(".select").length ||
            $(".slct.active").click()
    })
});
  </script>
</head>

<body>
<div class="select">
                    <a href="#" class="slct">Прямоугольные стеллы</a>
                    <ul class="drop drop_stella">
                        <li><a>Прямоугольные стеллы</a></li>
                        <li><a>Резные стеллы</a></li>
                        <li><a>Двойник</a></li>
                    </ul>
                    <input name="stella" type="hidden" id="stella" value="Прямоугольные стеллы"/>
                </div>
<div class="select">
                    <a href="#" class="slct">Прямоугольные стеллы</a>
                    <ul class="drop drop_stella">
                        <li><a>Прямоугольные стеллы</a></li>
                        <li><a>Резные стеллы</a></li>
                        <li><a>Двойник</a></li>
                    </ul>
                    <input name="stella" type="hidden" id="stella" value="Прямоугольные стеллы"/>
                </div>
</body>
</html>
Ответить с цитированием