text CSS / JQuery下拉菜单

Posted 2021-05-03

<ul class="dropdown">
  <li class="active" data-sort="item__00">All</li>
  <li data-sort="item__01">Item 01</li>
  <li data-sort="item__02">Item 02</li>
  <li data-sort="item__03">Item 03</li>
  <li data-sort="item__04">Item 04</li>
  <li data-sort="item__05">Item 05</li>
</ul>

.dropdown {
  list-style: none;
  display: block;
  position: relative;
  border: 2px solid black;
  width: 300px;
  padding: 10px;
  padding-top: 40px;
  padding-bottom: 0;
  margin: 0;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  &:after {
    content: '';
    display: inline-block;
    background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png);
    background-repeat:no-repeat;
    background-size: contain;
    height: 15px;
    width: 15px;
    position: absolute;
    top: 12px;
    right: 15px;
    transition: transform 0.3s ease;
  }
  &.open {
    padding-top: 40px;
    padding-bottom: 10px;
    max-height: 400px;
    overflow: scroll;
    &:after {
      transform: rotate(-180deg);
    }
    li {
      opacity: 1;
    }
  }
  li {
    cursor: pointer;
    display: inline-block;
    font-family: helvetica;
    font-weight: 500;
    letter-spacing: 0.05em;
    width: 100%;
    opacity: 0;
    padding: 5px 0;
    color: black;
    transition: opacity 0.2s ease;
    + li {
      margin-top: 0px;
    }
    &.active {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 11px 10px;
      opacity: 1;
    }
  }
}

$('.dropdown li').on('click', function(){
  var dropdown = $(this).parent();
  var currentItem = $(this);
  var allItems = $('.dropdown li');
  
  dropdown.toggleClass('open');
  allItems.removeClass('active');
  currentItem.addClass('active');
});

View it on Code Pen:

https://codepen.io/DinosVsRobots/pen/mRyGzo