Тестовый пример

by Артур Бакаев

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="search-filter">
    <p class="search-filter__value">Поручения&nbsp;и&nbsp;рекомендации</p>
    <ul class="search-filter__box">
      <li>Поручения&nbsp;и&nbsp;рекомендации</li>
      <li>Служебные&nbsp;переписки</li>
      <li>Распорядительные&nbsp;документы</li>
    </ul>
  </div>
</body>
</html>

CSS

.search-filter{
    margin: 15px;
    display: block;
    color: #91959d;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    border: 1px solid #444444;
    height: 40px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    user-select: none;
    width: 300px
}
.search-filter__value{
    color:  #91959d;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    padding-right: 30px;
    padding-left: 16px;
}
.search-filter__box {
    line-height: 40px;
    background-color: #fff;
}
.search-filter__box li{
    padding-right: 30px;
    padding-left: 16px;
}
.search-filter__box li:hover{
    background-color: #BBBBBB;
    color: #fff;
}

JavaScript

function selectbox() {
    $('.search-filter > p.search-filter__value').click(function () {
        var currentValue = $(this).parent().css("overflow");
        if (currentValue == "hidden") {
            $(this).parent().css({
                "overflow": "visible",
                "border-bottom-color": "transparent",
                "background-color": "#F0F0F0"
            });
        }
        else {
            $(this).parent().css({
                "overflow": "hidden",
                "border-bottom-color": "#444444",
                "background-color": "transparent"
            });
        }
    })
    $('.search-filter__box > li').click(function () {
        $(this).parent().parent().css({
            "overflow": "hidden",
            "border-bottom-color": "#444444",
            "background-color": "transparent"
        });
        $(this).parent().siblings("p").text($(this).text());
    })
}

$(document).ready(function (){
    selectbox()
});

/*
function selectboxopen() {
    var currentValue = $(this).parent().css("overflow");
    if (currentValue == "hidden") {
        $(this).parent().css({"overflow":"visible","border-bottom-color":"transparent","background-color":"#F9F9F9"});
    }
    else {
        $(this).parent().css({"overflow":"hidden","border-bottom-color":"#E5E5E5","background-color":"transparent"});
    }
}

function selectboxselect() {
    $(this).parent().parent().css({"overflow":"hidden","border-bottom-color":"#E5E5E5","background-color":"transparent"});
    $(this).parent().siblings("p").text($(this).text());
}

$(document).ready(function (){
    $('.search-filter > p.search-filter__value').click(function () {
        selectboxopen()
    });
    $('.search-filter__box > li').click(function () {
        selectboxselect()
    })
});*/