JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <ul class="ui-list">
    <li>menu01</li>
    <li>menu0222</li>
    <li>menu031</li>
    <li>menu04</li>
    <li>menu05</li>
    <li>menu05</li>
    <li>menu05</li>
    <li>menu05</li>
    <li>menu05</li>
    <li>menu05</li>
    <li>ㅂㅂㅂㅂㅂㅂㅈㅈㅈㅈㅈㅈ</li>
  </ul>
  <button type="button" class="btn-toggle">open</button>
</div>

SCSS

.container {
  width: 300px;
  margin: 20px auto;
  display: flex;
  /* justify-content: center; */
  flex-wrap: nowrap;
  position: relative;
  ul {
    /* display: contents; */
    flex-wrap: nowrap;
    display: flex;
    white-space: pre;
    overflow-x: scroll;
    li {
      /* display: inline-flex; */
      margin-right: 4px;
      margin-bottom: 7px;
      border: 1px solid #000;
      padding: 10px;
      float: left;
      &:last-child {
        /* display: inline-flex; */
        margin-right: 0;
      }
    }
  }
  .btn-toggle {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    float: right;
    height: 43px;
  }
  &.active {
    flex-wrap: wrap;
    display: block;
    ul {
      display: contents;
      flex-wrap: wrap;
      white-space: normal;
      overflow: visible;
      /* float: left; */
    }
    .btn-toggle {
      position: static;
    }
  }
}

JavaScript

const container = document.querySelector('.container');
const list = document.querySelector('.ui-list');
const btnToggle = document.querySelector('.btn-toggle');
const firstLi = list.querySelector('li');
console.log(firstLi.textContent);
btnToggle.addEventListener('click', (e) => {
	console.log(e.currentTarget);
  let target = e.currentTarget;
  container.classList.toggle('active');
});