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

Question

我尝试按照此解决方案来创建可调整大小的侧边导航栏:How can I resize a DIV by dragging just ONE side of it? .我能够创建一个可调整大小的 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>

感谢您的帮助!

Answer 1

在您链接的示例中，有一个 dragbar 元素。您需要将该元素添加到您的 HTML 中并对该元素执行 mousedown 事件。