Question

基本上，我有一个html页面，当你点击方块时，我已经设置了一个滑动面板。点击它后如何让方块旋转180度？我只能让按钮触发div滑动或按钮旋转，但不能同时触发。我注意到它与我如何放置输入标签有关。如果它在标签内，则按钮旋转但对面板没有影响。如果它在标签之外，按下方框会触发侧面板。一直在这一天，但似乎无法弄明白。理想情况下，我本来希望用箭头代替广场，但我不知道从哪里开始...

-sliding div： https://codepen.io/yung_terminal/pen/oWrZZj

HTML：

<div class="main-wrap">
 <input id="slide-sidebar" type="checkbox" role="button" />
 <label for="slide-sidebar">
 <div class="tab"></div>
 </label>

 <div class="content">

 </div>
 </div>

CSS：

.sidebar {
background-color: white;
width: 300px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
#navpan {
position: absolute;
right: 120px;
bottom: 740px;
}
.sidebar li{
color: black;
font-weight: bold;
font-size: 25px;
text-decoration: none;
list-style: none;
}
.content {
background-color: red;
position: absolute;
top: 0;
left: 190px;
right: 0;
bottom: 0;  
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}

input[type=checkbox] {
display: none;
}

input:checked ~ .content{ 
left: 0;
}

input:checked ~ label {
left: 0;
}

label {
z-index: 2;
position: absolute;
top: 50%;
left: 190px;
background-color: 0;
font-size:60px;
-moz-transition: left 0.5s ease;
transition: left 0.5s ease;
}

.tab {
width: 100px;
height: 100px;
background-color: white;
transition: all 0.75s 0.25s;
transform: rotate(0);
}

#slide-sidebar:checked + .tab{
transform: rotate(180deg);
}

Answer 1

我更新了你的代码。请检查一下。 DEMO。我在该框中添加了onclick函数并创建了rotated类。使用css我用90度旋转该框。

＆＃13;

$(document).ready(function() {
  $('#rotate').click(function(){
    $(this).toggleClass('rotated');
});
});

＆＃13;

.rotated { 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.sidebar {
    background-color: white;
    width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
#navpan {
  position: absolute;
  right: 120px;
  bottom: 740px;
}
.sidebar li{
    color: black;
    font-weight: bold;
    font-size: 25px;
    text-decoration: none;
    list-style: none;
}
.content {
    background-color: red;
    position: absolute;
    top: 0;
    left: 190px;
    right: 0;
    bottom: 0;  
    -moz-transition: left 0.5s ease;
    transition: left 0.5s ease;
}
input[type=checkbox] {
   display: none;
}
input:checked ~ .content{ 
    left: 0;
}
input:checked ~ label {
    left: 0;
}
label {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 190px;
    background-color: 0;
    font-size:60px;
    -moz-transition: left 0.5s ease;
    transition: left 0.5s ease;
}
.tab {
    width: 100px;
    height: 100px;
    background-color: white;
    transition: all 0.75s 0.25s; 
}
#slide-sidebar:checked + .tab{
  transform: rotate(180deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrap">
      <input id="slide-sidebar" type="checkbox" role="button" />
      <label for="slide-sidebar">
        <div class="tab" id="rotate"></div>
      </label>
  <div class="content">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nulla accusamus illo a dolorum quo, maxime fuga ea nam quae ab deserunt quas distinctio culpa recusandae assumenda quisquam repellendus, perferendis!</h1>
  </div>
</div>

＆＃13;

Answer 2

你很亲密，但并不完全。

您需要更改：#slide-sidebar:checked + .tab

收件人：#slide-sidebar:checked + label>.tab

在您的初始选择器中，您希望.tab成为checkbox的兄弟。 label是.tab为label的孩子的兄弟姐妹。

＆＃13;

.rotated { 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.sidebar {
    background-color: white;
    width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
#navpan {
  position: absolute;
  right: 120px;
  bottom: 740px;
}
.sidebar li{
    color: black;
    font-weight: bold;
    font-size: 25px;
    text-decoration: none;
    list-style: none;
}
.content {
    background-color: red;
    position: absolute;
    top: 0;
    left: 190px;
    right: 0;
    bottom: 0;  
    -moz-transition: left 0.5s ease;
    transition: left 0.5s ease;
}
input[type=checkbox] {
   display: none;
}
input:checked ~ .content{ 
    left: 0;
}
input:checked ~ label {
    left: 0;
}
label {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 190px;
    background-color: 0;
    font-size:60px;
    -moz-transition: left 0.5s ease;
    transition: left 0.5s ease;
}
.tab {
    width: 100px;
    height: 100px;
    background-color: white;
    transition: all 0.75s 0.25s; 
}
#slide-sidebar:checked + label>.tab{
  transform: rotate(180deg);
}

＆＃13;

<div class="main-wrap">
      <input id="slide-sidebar" type="checkbox" role="button" />
      <label for="slide-sidebar">
        <div class="tab" id="rotate"></div>
      </label>
  <div class="content">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nulla accusamus illo a dolorum quo, maxime fuga ea nam quae ab deserunt quas distinctio culpa recusandae assumenda quisquam repellendus, perferendis!</h1>
  </div>
</div>

＆＃13;

Answer 3

+表示直接兄弟，.tab不是，label包裹.tab。所以改变

#slide-sidebar:checked + .tab{
   transform: rotate(180deg);
}

到

#slide-sidebar:checked + label .tab{
   transform: rotate(180deg);
}

如何使用HTML和CSS旋转滑动导航面板的按钮元素？

3 个答案: