jQuery toggle() для скользящего меню

Question

Я пытаюсь использовать параметр переключения, используя jQuery. У меня есть два стиля (подменю - значок и подменю - мобильный). При нажатии на «sub-menu-icon» класс 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