0

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

<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/

4

1 回答 1

0 
$(".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/

于 2012-11-30T14:27:02.783 回答