使用JQuery .Toggle和CSS轉換按鈕
[英]Using JQuery .Toggle with a css transform button
問題描述
我嘗試使用切換功能顯示菜單。 菜單顯示，然后隱藏其自身，而無需兩次單擊按鈕。 我已經添加了
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>
2 個解決方案
解決方案1
0 2016-11-04 14:34:48
你去了：
$(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>
解決方案2
0 2016-11-04 15:27:03
稍稍改動一下代碼，您完全不需要任何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>
希望這可以幫助。
帶按鈕的TOGGLE 2 DIVS（使用Javascript，HTML和CSS）
[英]TOGGLE 2 DIVS with a Button (Using Javascript, HTML and CSS)
如何使2個按鈕使用jquery切換CSS，而僅使用1個按鈕。 不顯示隱藏/顯示
[英]How to make 2 buttons toggle css with jquery and using only 1 button instead. NOT display hide/show
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.