javascript — JQuery Collapse Действуя странно на Collapse

JQuery Collapse Действуя странно на Collapse

Когда я нажимаю «Переключить боковую панель», переход выполняет этот странный прыжок, где он заставляет «Основную область» опускаться ниже «боковой области» до тех пор, пока движение не закончится, а затем не вернется в правильное положение. здесь происходит Я использую браузер Chrome для этого, очистил кеш и все еще делает этот странный прыжок. Я не уверен, имеет ли это отношение к размеру или что-то в этом роде.

Я пробовал несколько решений, и все они производили одно и то же действие «прыжка».

 $(function() { $("#sortable").sortable(); $("#sortable").disableSelection(); }); $(document).ready(function() { $(".toggle-sidebar").click(function() { $("#sidebar").toggleClass("collapsed"); $("#content").toggleClass("col-md-12 col-md-9"); return false; }); }); 
 #content, #sidebar { min-height: 500px; } #row-main { overflow-x: hidden; /* necessary to hide collapsed sidebar */ } #content { background-color: lightyellow; -webkit-transition: width 0.3s ease; -moz-transition: width 0.3s ease; -o-transition: width 0.3s ease; transition: width 0.3s ease; } #sidebar { background-color: lightgrey; -webkit-transition: margin 0.3s ease; -moz-transition: margin 0.3s ease; -o-transition: margin 0.3s ease; transition: margin 0.3s ease; } .collapsed { display: none; /* hide it for small displays */ } @media (min-width: 992px) { .collapsed { display: block; margin-left: -25%; /* same width as sidebar */ } } 
 {amp}lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-1.12.4.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="card card-body" id="main_area"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div class="row" id="row-main"{amp}gt; {amp}lt;div class="col-md-3" id="sidebar"{amp}gt; SIDE BAR {amp}lt;ul id="mycardlist"{amp}gt; {amp}lt;li class="ui-state-default"{amp}gt;{amp}lt;span class="ui-icon ui-icon-arrowthick-2-ns"{amp}gt;{amp}lt;/span{amp}gt;Item 2{amp}lt;/li{amp}gt; {amp}lt;li class="ui-state-default"{amp}gt;{amp}lt;span class="ui-icon ui-icon-arrowthick-2-ns"{amp}gt;{amp}lt;/span{amp}gt;Item 3{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-9" id="content"{amp}gt; {amp}lt;button type="button" class="btn btn-default toggle-sidebar"{amp}gt;Toggle sidebar{amp}lt;/button{amp}gt; MAIN AREA {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector