javascript - 单击时可调整大小的侧边导航展开

问题描述

我已尝试按照此解决方案创建可调整大小的侧导航栏：如何通过仅拖动 DIV 的一侧来调整 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>

谢谢您的帮助！

标签： javascripthtmlcssresizable

javascript - 单击时可调整大小的侧边导航展开

问题描述

解决方案

推荐阅读