jQueryのスライディングメニューの切り替え

Question

jQueryを使用してトグルオプションを実現しようとしています。私は2つのスタイル（サブメニューアイコンとサブメニューモバイル）を持っています。 "sub-menu-icon" class divをクリックすると、 "sub-menu-mobile"クラスdivを左から右に、そして右から左にトグルします。

$(document).ready(function() { 
 
    $('.sub-menu-icon').toggle(function() { 
 
    $(".sub-menu-mobile").css("width", "200px"); 
 
    }); 
 
});

.sub-menu-icon { 
 
    width: 30px; 
 
    height: 30px; 
 
    border: 1px solid #2B383E; 
 
    background-color: #4390ce; 
 
    display: block; 
 
    float: right; 
 
} 
 
.sub-menu-mobile { 
 
    min-width: 0px; 
 
    height: 100%; 
 
    background-color: #cccccc; 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sub-menu-icon"> 
 
    Icon 
 
</div> 
 
<div class="sub-menu-mobile"> 
 
    Rights side Menu 
 
</div>

Answer 1

その後、幅を切り替えクラスを切り替え、メニューのクリックハンドラを使用します。また、HTML要素を再配置し、メニューにposition: relative;を追加すると、メニューがサイドバーの上に表示されます。

$('.sub-menu-icon').on('click',function() { 
 
    $(".sub-menu-mobile").toggleClass('width'); 
 
});

.sub-menu-icon { 
 
     width: 30px; 
 
     height: 30px; 
 
     border: 1px solid #2B383E; 
 
     background-color: #4390ce; 
 
     display: block; 
 
     float: right; 
 
     position: relative; 
 
    } 
 
    
 
    .sub-menu-mobile { 
 
     min-width: 0px; 
 
     height: 100%; 
 
     background-color: #cccccc; 
 
     position: absolute; 
 
     top: 0px; 
 
     right: 0px; 
 
    } 
 
    
 
    .width { 
 
     width: 200px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sub-menu-mobile"> 
 
    Rights side Menu 
 
</div> 
 
<div class="sub-menu-icon"> 
 
    icon 
 
</div>

Answer 2

あなたに非常に類似したケースと、スレッドがあるようです。これをチェック！

Toggle Between two Divs