javascript - 单击带有旋转图像的图像时打开列表

Question

有如下结构：点击图片时需要在图片上方向上打开列表，将图片旋转180度，带有一些线性过渡效果，

<div class="wrapper">
     <span><Image></span>
    <ul class="list">
    <li class="">
     <a href="">item 1</a>
    </li>
    <li class="">
     <a href="">item 2</a>
    </li>
    <li class="">
     <a href="">item 3</a>
    </li>
    <li class="">
     <a href="">item 4</a>
    </li>
    </ul>
    </div>

尝试使用兄弟最大高度，但没有得到我想要的效果

list{
 max-height: 0;
 overflow:hidden;
}
a:focus+list{
 max-height:10rem;
}

标签： javascriptcss

Answer 1

给你：

.list {
  max-height: 0;
  overflow: hidden;
}

span {outline:0}

span img {transition:.5s}

span:focus img {transform: rotate(90deg)}

span:focus+.list {
  max-height: 10rem;
}

<div class="wrapper">
  <span tabindex="1">
    <img src="https://picsum.photos/100">
  </span>
  <ul class="list">
    <li class="">
      <a href="">item 1</a>
    </li>
    <li class="">
      <a href="">item 2</a>
    </li>
    <li class="">
      <a href="">item 3</a>
    </li>
    <li class="">
      <a href="">item 4</a>
    </li>
  </ul>
</div>