使用jQuery。使用css變換按鈕切換

我嘗試使用切換功能顯示菜單。菜單顯示然後隱藏自己，而不用兩次點擊按鈕。我已添加使用jQuery。使用css變換按鈕切換

e.preventDefault（）;這工作，但按鈕不再變形，因爲它應該？

$(document).ready(function() { 
 
    $(".spinner-master2").click(function() { 
 
    $(".slideme").toggle("slow", function() {}); 
 
    }); 
 
});

.slideme { 
 
    background-color: rgba(183, 221, 240, 0.88); 
 
    width: 100%; 
 
    height: 150px; 
 
    display: none; 
 
} 
 
.spinner-master2 * { 
 
    transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    box-sizing: border-box; 
 
} 
 
.spinner-master2 { 
 
    position: fixed; 
 
    top: 100px; 
 
    left: 50%; 
 
    margin: 0px auto; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
.spinner-master2 input[type=checkbox] { 
 
    display: none; 
 
} 
 
.spinner-master2 label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    z-index: 99; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0px; 
 
    left: 0; 
 
} 
 
.spinner-master2 .spinner2 { 
 
    position: absolute; 
 
    height: 5px; 
 
    width: 100%; 
 
    background-color: #000; 
 
} 
 
.spinner-master2 .diagonal.part-1 { 
 
    position: relative; 
 
    float: left; 
 
} 
 
.spinner-master2 .horizontal { 
 
    position: relative; 
 
    float: left; 
 
    margin-top: 7px; 
 
} 
 
.spinner-master2 .diagonal.part-2 { 
 
    position: relative; 
 
    float: left; 
 
    margin-top: 6px; 
 
} 
 
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .horizontal { 
 
    opacity: 0; 
 
} 
 
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-1 { 
 
    transform: rotate(135deg); 
 
    -webkit-transform: rotate(135deg); 
 
    margin-top: 10px; 
 
} 
 
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-2 { 
 
    transform: rotate(-135deg); 
 
    -webkit-transform: rotate(-135deg); 
 
    margin-top: -16px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="image"></div> 
 
<div id="logo">js moody</div> 
 

 
<div class="slideme"> 
 

 
</div> 
 

 
<div id="menu" class="spinner-master2"> 
 
    <input type="checkbox" id="spinner-form2" /> 
 
    <label for="spinner-form2" class="spinner-spin2"> 
 
    <div class="spinner2 diagonal part-1"></div> 
 
    <div class="spinner2 horizontal"></div> 
 
    <div class="spinner2 diagonal part-2"></div> 
 
    </label> 
 
</div>

來源

2016-11-04 user3498054

嘿，人！在上次編輯片段改變其行爲 – Banzay

該按鈕似乎從布爾格圖標穿越圖標很好。是對的嗎？ –

@Banzay我已經回滾了，最後一位編輯由於某種原因改變了Jquery –

你去那裏：

$(document).ready(function() { 
 
    $("#spinner-form2").change(function() { 
 
    $(".slideme").toggle("open"); 
 
    }); 
 

 

 
});

.slideme { 
 
    background-color: rgba(183, 221, 240, 0.88); 
 
    width: 100%; 
 
    height: 150px; 
 
    display:none; 
 
} 
 
.spinner-master2 * { 
 
    transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    box-sizing: border-box; 
 
} 
 
.spinner-master2 { 
 
    position: fixed; 
 
    top: 100px; 
 
    left: 50%; 
 
    margin: 0px auto; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
.spinner-master2 input[type=checkbox] { 
 
    display: none; 
 
} 
 
.spinner-master2 label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    z-index: 99; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0px; 
 
    left: 0; 
 
} 
 
.spinner-master2 .spinner2 { 
 
    position: absolute; 
 
    height: 5px; 
 
    width: 100%; 
 
    background-color: #000; 
 
} 
 
.spinner-master2 .diagonal.part-1 { 
 
    position: relative; 
 
    float: left; 
 
} 
 
.spinner-master2 .horizontal { 
 
    position: relative; 
 
    float: left; 
 
    margin-top: 7px; 
 
} 
 
.spinner-master2 .diagonal.part-2 { 
 
    position: relative; 
 
    float: left; 
 
    margin-top: 6px; 
 
} 
 
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .horizontal { 
 
    opacity: 0; 
 
} 
 
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-1 { 
 
    transform: rotate(135deg); 
 
    -webkit-transform: rotate(135deg); 
 
    margin-top: 10px; 
 
} 
 
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-2 { 
 
    transform: rotate(-135deg); 
 
    -webkit-transform: rotate(-135deg); 
 
    margin-top: -16px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="image"></div> 
 
    <div id="logo">js moody</div> 
 

 
    <div class="slideme"> 
 

 
    </div> 
 

 
    <div id="menu" class="spinner-master2"> 
 
    <input type="checkbox" id="spinner-form2" /> 
 
    <label for="spinner-form2" class="spinner-spin2"> 
 
     <div class="spinner2 diagonal part-1"></div> 
 
     <div class="spinner2 horizontal"></div> 
 
     <div class="spinner2 diagonal part-2"></div> 
 
    </label> 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2016-11-04 14:34:48 GiuServ

與您的代碼的一點點洗牌，你可以做到這一點沒有任何JavaScript的。

我已將複選框移至代碼的起始位置，並更改了CSS邏輯，以便它可以與新定位一起使用。

看一看。

#spinner-form2 { 
 
    display: none; 
 
} 
 
.slideme { 
 
    background-color: rgba(183, 221, 240, 0.88); 
 
    width: 100%; 
 
    height: 150px; 
 
    opacity: 0; 
 
    transform-origin: 0 0; 
 
    transform: scale(0); 
 
    transition: all 400ms; 
 
} 
 
.spinner-master2 * { 
 
    transition: all 0.3s; 
 
    -webkit-transition: all 0.3s; 
 
    box-sizing: border-box; 
 
} 
 
.spinner-master2 { 
 
    position: fixed; 
 
    top: 100px; 
 
    left: 50%; 
 
    margin: 0px auto; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
.spinner-master2 label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    z-index: 99; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0px; 
 
    left: 0; 
 
} 
 
.spinner-master2 .spinner2 { 
 
    position: absolute; 
 
    height: 5px; 
 
    width: 100%; 
 
    background-color: #000; 
 
} 
 
.spinner-master2 .diagonal.part-1 { 
 
    position: relative; 
 
    float: left; 
 
} 
 
.spinner-master2 .horizontal { 
 
    position: relative; 
 
    float: left; 
 
    margin-top: 7px; 
 
} 
 
.spinner-master2 .diagonal.part-2 { 
 
    position: relative; 
 
    float: left; 
 
    margin-top: 6px; 
 
} 
 
/* when #spinner-form2 is checked */ 
 

 
#spinner-form2[type=checkbox]:checked ~ .spinner-master2 > .spinner-spin2 > .horizontal { 
 
    opacity: 0; 
 
} 
 
#spinner-form2[type=checkbox]:checked ~ .spinner-master2 > .spinner-spin2 > .diagonal.part-1 { 
 
    transform: rotate(135deg); 
 
    -webkit-transform: rotate(135deg); 
 
    margin-top: 10px; 
 
} 
 
#spinner-form2[type=checkbox]:checked ~ .spinner-master2 > .spinner-spin2 > .diagonal.part-2 { 
 
    transform: rotate(-135deg); 
 
    -webkit-transform: rotate(-135deg); 
 
    margin-top: -16px; 
 
} 
 
#spinner-form2[type=checkbox]:checked ~ .slideme { 
 
    transform: scale(1); 
 
    opacity: 1; 
 
}

<input type="checkbox" id="spinner-form2" /> 
 

 
<div id="image"></div> 
 
<div id="logo">js moody</div> 
 

 
<div class="slideme"></div> 
 

 
<div id="menu" class="spinner-master2"> 
 
    <label for="spinner-form2" class="spinner-spin2"> 
 
    <div class="spinner2 diagonal part-1"></div> 
 
    <div class="spinner2 horizontal"></div> 
 
    <div class="spinner2 diagonal part-2"></div> 
 
    </label> 
 
</div>

希望這有助於。

來源

2016-11-04 15:27:03

使用jQuery。使用css變換按鈕切換

回答

相關問題