使用JQuery .Toggle和CSS转换按钮

Question

我尝试使用切换功能显示菜单。 菜单显示，然后隐藏其自身，而无需两次单击按钮。 我已经添加了

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> 

Answer 1

你去了：

 $(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> 

Answer 2

稍稍改动一下代码，您完全不需要任何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> 

希望这可以帮助。