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

具有以下结构：单击图像时需要向上打开图像顶部的列表，并将图像旋转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{
最大高度：0；
溢出：隐藏；
}
span{大纲：0}
span img{转换：.5s}
span:focusimg{变换：旋转（90度）}
span:focus+.list{
最大高度：10雷姆；
}

给您：

.list{
最大高度：0；
溢出：隐藏；
}
span{大纲：0}
span img{转换：.5s}
span:focusimg{变换：旋转（90度）}
span:focus+.list{
最大高度：10雷姆；
}

@-这对需求很有效，但不幸的是，我遇到了一个问题，点击会触发页面刷新，是否有其他方法可以解决这个问题-顺便说一句，我在reactjs中使用了它。@monkeyjs，谢谢，我已经更新了我的答案。您可以将

替换为

@-这对需求很有效，但不幸的是，我遇到了一个问题，单击会触发页面刷新，是否有其他方法可以解决此问题-顺便说一句，我在reactjs中使用此方法。@monkeyjs，谢谢，我已更新了我的答案。您可以将

替换为

。

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