时间戳

首页 > 解决方案 > 手风琴部分，单击图像以旋转图标

javascript - 手风琴部分，单击图像以旋转图标

问题描述

我正在寻找一个小问题的解决方案，完全新手，建立了我的第一个网站。我使用了“摘要详细信息”功能，并包含了一张图片，这意味着股票下拉箭头已移动，我无法将其定位到我想要的位置。我从材料图标中添加了一个图标，我希望它在单击整个图像/部分时旋转。我不会包含任何 JS，因为我可能离我应该去的地方很远。非常感谢任何帮助。

.card {
    width: 18em;
    justify-self: center;
    margin: 0;
    padding: 2em 1em 0;
}


.card img {
    margin: 0 0 5px 0;
    width: 18em;
    height: auto;
}

summary {
    width: 18em;
    font-weight: bold;
    font-family: monospace;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: center;
    
    margin: 0;
    padding: 0;
    
    color: #202020;
    background: #808080;
    
    cursor: pointer;
    
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

summary::-webkit-details-marker {
    display: none;
}

.card i {
    margin: 0;
    padding: 0;
    font-variant-position: sub;
    color: #101010;
}

.card i:active{
    transform: rotate(180deg);
    color: #fef;
}

summary:focus {
    outline-style: none;
    background: #404040;
    color: #fef;
}

details {
    width: 17.55em;
    color: #fef;
    background: #212529;
    border-bottom: 1px solid rgba(250, 224, 66, .45);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: 0;
    margin: -.25em 0 2em;
    border-right: solid 1px #b5b5b5;
    border-bottom: solid 1px #b5b5b5;
}

.contentul li {
    padding: 1em;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="card" id="card" >
                        <details>
                            <summary><img id="img1" src="https://images.unsplash.com/photo-1503708928676-1cb796a0891e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80" alt="ex1">Excavators<br><i class="fas fa-chevron-down"></i></summary>
                                <ul class="contentul">
                                    <li>180° Wheeled</li>
                                    <li>360° Wheeled</li>
                                    <li>360° Tracked</li>
                                </ul>
                        </details>
                    </div>

标签： javascriptjqueryhtmlcss

解决方案

你不需要JavaScript完成这个。该translateY位用于防止图标旋转离开其起始位置。该值0.5em表示包含 chevron 的框高度的一半。

.fas.fa-chevron-down {
  transition: .15s transform ease-in-out;
}

details[open] .fas.fa-chevron-down {
  transform: rotate(180deg) translateY(-0.5em);
}

演示

.card {
  width: 18em;
  justify-self: center;
  margin: 0;
  padding: 2em 1em 0;
}

.card img {
  margin: 0 0 5px 0;
  width: 18em;
  height: auto;
}

summary {
  width: 18em;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  padding: 0;
  color: #202020;
  background: #808080;
  cursor: pointer;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

summary::-webkit-details-marker {
  display: none;
}

.card i {
  margin: 0;
  padding: 0;
  font-variant-position: sub;
  color: #101010;
}

.card i:active {
  transform: rotate(180deg);
  color: #fef;
}

summary:focus {
  outline-style: none;
  background: #404040;
  color: #fef;
}

details {
  width: 17.55em;
  color: #fef;
  background: #212529;
  border-bottom: 1px solid rgba(250, 224, 66, .45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: 0;
  margin: -.25em 0 2em;
  border-right: solid 1px #b5b5b5;
  border-bottom: solid 1px #b5b5b5;
}

.contentul li {
  padding: 1em;
}

.fas.fa-chevron-down {
  transition: .15s transform ease-in-out;
}

details[open] .fas.fa-chevron-down {
  transform: rotate(180deg) translateY(-0.5em);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="card" id="card">
  <details>
    <summary><img id="img1" src="https://images.unsplash.com/photo-1503708928676-1cb796a0891e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80" alt="ex1">Excavators<br><i class="fas fa-chevron-down"></i></summary>
    <ul class="contentul">
      <li>180° Wheeled</li>
      <li>360° Wheeled</li>
      <li>360° Tracked</li>
    </ul>
  </details>
</div>

推荐阅读