CSS変換ボタンでJQuery .Toggleを使用する

トグル機能を使用してメニューを表示しようとしています。メニューは、ボタンを2回クリックすることなく表示され、次に非表示になります。私は追加しましたCSS変換ボタンでJQuery .Toggleを使用する

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

ボタンがburguerアイコンから十字アイコンにうまく機能しているようです。それは正しい？ –

@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

CSS変換ボタンでJQuery .Toggleを使用する

答えて

関連する問題