Я попытался использовать это решение для создания изменяемой боковой панели навигации: Как изменить размер DIV, перетаскивая только ОДНУ его сторону? .Я могу создать div с изменяемым размером, однако, div также изменяет размер каждый раз, когда я нажимаю, чтобы выбрать пункт меню.Я хочу, чтобы размер Sidenav изменялся только при перетаскивании мышью.
Одна вещь, которую нужно отметить: из-за инструмента, который я использую для разработки сайта, я не могу использовать #id, поэтому вместо этого я должен использовать класс.
Вот код:
var i = 0;
var dragging = false;
$('.sidenav-wrapper').mousedown(function(e){
e.preventDefault();
dragging = true;
var main = $('.body')
var ghostbar = $('<div>',
{id:'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function(e){
ghostbar.css("left", e.pageX + 2);
});
});
$(document).mouseup(function(e){
if (dragging)
{
$('.sidenav-wrapper').css("width", e.pageX + 2);
$('.main').css("left", e.pageX + 2);
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
.sidenav-wrapper
{
flex: 0 1 auto;
resize: horizontal;
cursor: e-resize;
overflow: auto;
width: 300px;
margin-left: 8.5%;
margin-top: 0px;
display: block;
background-color: #f7f7f7;
}
#ghostbar
{
width:3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999
}
<div class="sidenav-wrapper>
<div class=" sidenav-container ">
<ul class="menu">
<li>
<a>Menu </a>
</li>
<li>
<a>Menu </a>
</li>
<li>
<a>Menu </a>
</li>
<li>
<a>Menu </a>
</li>
<li>
<a>Menu </a>
</li>
<li>
<a>Menu </a>
</li>
<li>
<a>Menu </a>
</li>
</ul>
</div>
</div>
<div class="body">
<p> Some content here</p>
</div>
Спасибо за помощь!