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实例。

单击时可调整大小的侧面导航会扩展

2 个答案: