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

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 事件。

Answer 2

默认情况下停止在 ul 上向父级冒泡。每次单击时，都会在父元素上触发鼠标向下和鼠标向上。所以，停止在孩子身上传播事件。

我的意思是说，在 js 中添加以下行应该会在单击 ul 元素时停止侧边栏以调整大小。

$("ul").on('click',fucntion (e) {
   e.stopPropagation();
});

PS：我尝试在 Codepen 上运行您的代码，它似乎不起作用，您能否添加一个实际有效的 codepen/jsbin 实时示例。