不使用 jquery 将 UL LI 转换为手风琴

Question

我想将 UL LI 结构转换为手风琴，但不使用 Jquery。

我正在使用 Angular JS，这就是为什么我不想使用 Jquery 也不想使用 Bootsrap，因为我的数据仅显示在 UL LI 结构中。请帮我把 UL LI 转换成手风琴。

Answer 1

我发现这个链接只用 HTML + CSS 创建了一个手风琴

https://codepen.io/abergin/pen/ihlDf

CSS

$white: rgba(254,255,250,1)
$grey: rgba(220,231,235,1)
$red: rgba(255,104,115,1)
$black: rgba(48,69,92,0.8)
$sans: 'Titillium Web', sans-serif

.transition
  transition: all 0.25s ease-in-out

.flipIn
  animation: flipdown 0.5s ease both

.no-select
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

html
  width: 100%
  height: 100%
  perspective: 900
  overflow-y: scroll
  background-color: $grey
  font-family: $sans
  color: $black

body
  min-height: 0
  display: inline-block
  position: relative
  left: 50%
  margin: 90px 0
  transform: translate( -50% , 0 )
  box-shadow: 0 10px 0 0 $red inset
  background-color: $white
  max-width: 450px
  padding: 30px

  @media ( max-width:550px )
    box-sizing: border-box
    transform: translate( 0 , 0 )
    max-width: 100%
    min-height: 100%
    margin: 0
    left: 0

h1 , h2
  color: $red

h1
  text-transform: uppercase
  font-size: 36px
  line-height: 42px
  letter-spacing: 3px
  font-weight: 100
  @extend .flipIn

h2
  font-size: 26px
  line-height: 34px
  font-weight: 300
  letter-spacing: 1px
  display: block
  background-color: $white
  margin: 0
  cursor: pointer
  @extend .no-select

p
  color: $black
  font-size: 17px
  line-height: 26px
  letter-spacing: 1px
  position: relative
  overflow: hidden
  max-height: 800px
  @extend .transition
  opacity: 1
  transform: translate( 0 , 0 )  
  margin-top: 14px
  z-index: 2

ul
  list-style: none
  perspective: 900
  padding: 0
  margin: 0

  li
    position: relative
    padding: 0
    margin: 0
    padding-bottom: 4px
    padding-top: 18px
    border-top: 1px dotted $grey
    @extend .flipIn

    &:nth-of-type(1)
      animation-delay: 0.5s

    &:nth-of-type(2)
      animation-delay: 0.75s

    &:nth-of-type(3)
      animation-delay: 1.0s

    &:last-of-type
      padding-bottom: 0

    i
      position: absolute
      transform: translate( -6px , 0 )
      margin-top: 16px
      right: 0

      &:before , &:after
        content: ""
        @extend .transition
        position: absolute
        background-color: $red
        width: 3px
        height: 9px

      &:before
        transform: translate( -2px , 0 ) rotate( 45deg )

      &:after
        transform: translate( 2px , 0 ) rotate( -45deg )

    input[type=checkbox]
      position: absolute
      cursor: pointer
      width: 100%
      height: 100%
      z-index: 1
      opacity: 0

      &:checked
        &~p
          margin-top: 0
          max-height: 0
          opacity: 0
          transform: translate( 0 , 50% )

        &~i
          &:before
            transform: translate( 2px , 0 ) rotate( 45deg )

          &:after
            transform: translate( -2px , 0 ) rotate( -45deg )

@keyframes flipdown
  0%
    opacity: 0
    transform-origin: top center
    transform: rotateX(-90deg)
  5%
    opacity: 1
  80%
    transform: rotateX(8deg)
  83%
    transform: rotateX(6deg)
  92%
    transform: rotateX(-3deg)
  100%
    transform-origin: top center
    transform: rotateX(0deg) 

Answer 2

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }

body { line-height: 1 }

ol, ul { list-style: none }


.nav a, .nav label {
  display: block;
 padding: .85rem;
  color: #fff;
  background-color: #151515;
  box-shadow: inset 0 -1px #1d1d1d;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
}

.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
  color: rgba(255, 255, 255, 0.5);
  background: #030303;
}

.nav label { cursor: pointer; }

/**
 * Styling first level lists items
 */

.group-list a, .group-list label {
  padding-left: 2rem;
  background: #252525;
  box-shadow: inset 0 -1px #373737;
}

.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #131313; }

/**
 * Styling second level list items
 */

.sub-group-list a, .sub-group-list label {
  padding-left: 4rem;
  background: #353535;
  box-shadow: inset 0 -1px #474747;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323; }

/**
 * Styling third level list items
 */

.sub-sub-group-list a, .sub-sub-group-list label {
  padding-left: 6rem;
  background: #454545;
  box-shadow: inset 0 -1px #575757;
}

.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; }

/**
 * Hide nested lists
 */

.group-list, .sub-group-list, .sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .5s ease-in-out;
  transition: max-height .5s ease-in-out;
}

.nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
max-height: 1000px; }

/**
 * Rotating chevron icon
 */

label > span {
  float: right;
  -webkit-transition: -webkit-transform .65s ease;
  transition: transform .65s ease;
}

.nav__list input[type=checkbox]:checked + label > span {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

<nav class="nav" role="navigation">
    <ul class="nav__list">
      <li>
        <input id="group-1" type="checkbox" hidden="">
        <label for="group-1"><span class="fa fa-angle-right"></span> First level</label>
        <ul class="group-list">
          <li><a href="#">1st level item</a></li>
          <li>
            <input id="sub-group-1" type="checkbox" hidden="">
            <label for="sub-group-1"><span class="fa fa-angle-right"></span> Second level</label>
            <ul class="sub-group-list">
              <li><a href="#">2nd level nav item</a></li>
              <li><a href="#">2nd level nav item</a></li>
              <li><a href="#">2nd level nav item</a></li>
              <li>
                <input id="sub-sub-group-1" type="checkbox" hidden="">
                <label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label>
                <ul class="sub-sub-group-list">
                  <li><a href="#">3rd level nav item</a></li>
                  <li><a href="#">3rd level nav item</a></li>
                  <li><a href="#">3rd level nav item</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
      <input id="group-2" type="checkbox" hidden="">
      <label for="group-2"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li>
        </li><li><a href="#">1st level item</a></li>
        <li><a href="#">1st level item</a></li>
        <input id="sub-group-2" type="checkbox" hidden="">
        <label for="sub-group-2"><span class="fa fa-angle-right"></span> Second level</label>
        <ul class="sub-group-list">
          <li><a href="#">2nd level nav item</a></li>
          <li><a href="#">2nd level nav item</a></li>
          <li>
            <input id="sub-sub-group-2" type="checkbox" hidden="">
            <label for="sub-sub-group-2"><span class="fa fa-angle-right"></span> Third level</label>
            <ul class="sub-sub-group-list">
              <li><a href="#">3rd level nav item</a></li>
            </ul>
          </li>
        </ul>
        
      </ul>
      </li>
      <li>
      <input id="group-3" type="checkbox" hidden="">
      <label for="group-3"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li>
        </li><li><a href="#">1st level item</a></li>
        <li><a href="#">1st level item</a></li>
        <input id="sub-group-3" type="checkbox" hidden="">
        <label for="sub-group-3"><span class="fa fa-angle-right"></span> Second level</label>
        <ul class="sub-group-list">
          <li><a href="#">2nd level nav item</a></li>
          <li><a href="#">2nd level nav item</a></li>
          <li><a href="#">2nd level nav item</a></li>
          <li>
            <input id="sub-sub-group-3" type="checkbox" hidden="">
            <label for="sub-sub-group-3"><span class="fa fa-angle-right"></span> Third level</label>
            <ul class="sub-sub-group-list">
              <li><a href="#">3rd level nav item</a></li>
              <li><a href="#">3rd level nav item</a></li>
              <li><a href="#">3rd level nav item</a></li>
            </ul>
          </li>
        </ul>
        
      </ul>
      </li>
      <li>
      <input id="group-4" type="checkbox" hidden="">
      <label for="group-4"><span class="fa fa-angle-right"></span> First level</label>
      <ul class="group-list">
        <li>
        </li><li><a href="#">1st level item</a></li>
        <input id="sub-group-4" type="checkbox" hidden="">
        <label for="sub-group-4"><span class="fa fa-angle-right"></span> Second level</label>
        <ul class="sub-group-list">
          <li><a href="#">2nd level nav item</a></li>
          <li><a href="#">2nd level nav item</a></li>
        </ul>
        
      </ul>
      </li>
    </ul>
  </nav>