英文:
Making rotate in dropdown menu with CSS
问题
Here is the translated text:
我制作了一个下拉菜单，但当我点击它时，角度应该旋转180度。
我尝试使用.touch:checked，但它不起作用。我怎么才能实现旋转，当我再次点击它（关闭下拉菜单时）时，角度应该再次旋转180度，我不想首先使用JavaScript，所以如果您可以用CSS帮助我，我会很高兴。但如果我们必须使用JavaScript，也没有问题，您可以使用JavaScript来帮助。
<label for="touch" class="nav-label"><span id="services">Hizmetlerimiz</span>
<i class="fa-solid fa-angle-down angle" style="color: #f282a6;"></i>
</label>
<input type="checkbox" id="touch" class="touch">
<ul class="slide">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</div>
.slide {
list-style-type: none;
clear:both;
width:100%;
height:0px;
overflow: hidden;
transition: height .4s ease;
}
.touch:checked ~ .angle{
transform: rotate(180deg);
transition: transform 200ms linear;
}
.slide li {padding : 30px;}
#touch {position: absolute; opacity: 0; height: 0px;}
#touch:checked + .slide {height: 300px;}
英文:
Hi ı made a dropdown menu but ı want to when ı click it the angle should rotate 180 deg
I tried to use .touch checked but it didn't work. How can ı make the rotation and when ı click it again (when ı close the dropdown) the angle should rotate 180 deg again ı don't want to use javascript firstly so that if can you help me about this with css ı will be very happy. But if we have to use javascript no problem you can help with javascript too.
<label for="touch" class="nav-label"><span id="services">Hizmetlerimiz</span>
<i class="fa-solid fa-angle-down angle" style="color: #f282a6;"></i>
</label>
<input type="checkbox" id="touch" class="touch">
<ul class="slide">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</div>
.slide {
list-style-type: none;
clear:both;
width:100%;
height:0px;
overflow: hidden;
transition: height .4s ease;
}
.touch:checked ~ .angle{
transform: rotate(180deg);
transition: transform 200ms linear;
}
.slide li {padding : 30px;}
#touch {position: absolute; opacity: 0; height: 0px;}
#touch:checked + .slide {height: 300px;} ```
</details>
# 答案1
**得分**: 0
将复选框移到`<label>`之前。这样，通用兄弟选择器(`~`)就可以为我们工作了。此外，`.angle`元素 *不是* 复选框的兄弟，而是一个兄弟的 *子元素*。所以我们需要使用后代组合来正确选择它。
```html
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.slide {
list-style-type: none;
clear: both;
width: 100%;
height: 0px;
overflow: hidden;
transition: height .4s ease;
}
#touch:checked ~ label .angle {
transform: rotate(180deg);
transition: transform 200ms linear;
}
.slide li {
padding: 30px;
}
#touch {
position: absolute;
opacity: 0;
height: 0px;
}
#touch:checked ~ .slide {
height: 300px;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<input type="checkbox" id="touch" class="touch">
<label for="touch" class="nav-label">
<i class="fa-solid fa-angle-down angle" style="color: #f282a6;"></i>
<span id="services">Hizmetlerimiz</span>
</label>
<ul class="slide">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
<!-- end snippet -->
这是您提供的内容的翻译。
英文:
Move the checkbox to be before the <label>. This is so that the general sibling operator (~) can work for us. Furthermore, the .angle element is not a sibling of the checkbox, but rather a child of a sibling. So we will need to use a descendent combination to select it properly.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.slide {
list-style-type: none;
clear: both;
width: 100%;
height: 0px;
overflow: hidden;
transition: height .4s ease;
}
.touch:checked ~ * .angle {
transform: rotate(180deg);
transition: transform 200ms linear;
}
.slide li {
padding: 30px;
}
#touch {
position: absolute;
opacity: 0;
height: 0px;
}
#touch:checked ~ .slide {
height: 300px;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<input type="checkbox" id="touch" class="touch">
<label for="touch" class="nav-label">
<span id="services">Hizmetlerimiz</span>
<i class="fa-solid fa-angle-down angle" style="color: #f282a6;"></i>
</label>
<ul class="slide">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论