Изменяемая боковая навигация расширяется при нажатии - PullRequest
Новая
       15

Изменяемая боковая навигация расширяется при нажатии

0 голосов
/ 12 июня 2018

Я попытался использовать это решение для создания изменяемой боковой панели навигации: Как изменить размер 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>

Спасибо за помощь!

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

прекратить пузыриться на ul к родительскому элементу по умолчанию.Каждый раз, когда вы щелкаете, мышь вниз и мышь вверх запускаются на родительский элемент.поэтому просто перестаньте распространять событие на дочернем элементе.

Я имею в виду, добавление следующих строк в js должно остановить боковую панель, чтобы изменить размер при нажатии на элемент ul. 

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

PS: я попытался запустить ваш код на Codepen, похоже, он не работает, можете ли вы добавить живой пример codepen / jsbin, который на самом деле работает.

0 голосов
/ 12 июня 2018

В приведенном вами примере есть элемент dragbar.Вам нужно добавить этот элемент в ваш HTML и выполнить событие mousedown для этого элемента.

...