Question

我正在制作导航菜单编辑界面，我有一个简单的多级菜单，鼠标悬停在扩展子菜单上。

<nav>
    <ul class="sortable1 connectedSortable">
        <li class="droppable"><a href="#">Menu Item 1</a></li>
        <li class="droppable"><a href="#">Menu Item 2</a>
            <ul class=" sortable2 connectedSortable">
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
            </ul>
        </li>
        <li class="droppable"><a href="#">Menu Item 3</a></li>
        <li class="droppable"><a href="#">Menu Item 4</a>
            <ul class=" sortable2 connectedSortable">
                <li><a href="#">Submenu Item 4</a></li>
                <li><a href="#">Submenu Item 5</a></li>
                <li><a href="#">Submenu Item 6</a></li>
            </ul>
        </li>
        <li class="droppable"><a href="#">Menu Item 5</a></li>
    </ul>
</nav>

我想要的功能是当我将项目拖出子菜单时，子菜单将隐藏，当我将其拖动到具有子菜单的li时，它将打开

$(".droppable").hover(
    function () {
        $("ul", this).slideDown(100);
    },
    function () {
        $("ul", this).slideUp(100);
    }
).droppable({

    tolerance: 'intersect',
    over: function(event, ui) {
        if($(ui.draggable).parent() !== $(this)){
            $(ui.draggable).appendTo($(this));
        }

        $("ul", this).slideDown(100);
    },
    out: function(event, ui) {
        if($(ui.draggable).parent() !== $(this)){
            $(ui.draggable).appendTo($(this));
        }

        $("ul", this).slideUp(100);
    }
});

问题在于，当我使用jQuery UI可排序over:方法时，当我将鼠标悬停在li子菜单上时，子菜单会打开，但是，当我将项目移动到ul，它会关闭，因为移出顶部li会触发我设置为关闭菜单的out:方法。

在我将父项ul移到其外部之后，如何保持li处于打开状态？

http://jsfiddle.net/6pgHa/6/

Answer 1

$(".sortable1, .sortable2").sortable({
    connectWith: ".connectedSortable",
    placeholder: "sortable-nav-items-placeholder"
}).disableSelection();

var dontClose = false;
$(".droppable").hover(
    function () {
        $("ul", this).slideDown(100);
    },
    function () {        
        $("ul", this).slideUp(100);
    }
).droppable({

    tolerance: 'intersect',
    activate: function(event, ui) {
        dontClose = !!(ui.draggable[0]);        
    },
    over: function(event, ui) {
        if($(ui.draggable).parent() !== $(this)){
            $(ui.draggable).appendTo($(this));
        }

        $("ul", this).slideDown(100);
    },
    out: function(event, ui) {
        if(dontClose) return;
        if($(ui.draggable).parent() !== $(this)){
            $(ui.draggable).appendTo($(this));
        }

        $("ul", this).slideUp(100);
    },
    drop : function(event, ui) {
        dontClose = false;        
    }
});

好的我用一些布尔标志修改了它们。现在没有时间进行测试，但至少应该给你实验的方向。如果有任何问题可以随意问我几个小时后会看看它这是jsfiddle http://jsfiddle.net/6pgHa/18/

在下拉列表之间移动可拖动

1 个答案: