ddsmoothmenu在第一次打开时展开所有菜单项

时间:2014-07-18 04:14:35

标签: jquery html css

我使用knockout将项目绑定到我的菜单,我使用了ddsmoothmenu。但是当页面加载时,菜单会展开里面的所有项目,我希望它崩溃所有ultil用户悬停。 请参阅我的附件图片。

Link Fiddle

我的HTML:

<div id="smoothmenu1" class="ddsmoothmenu-v">
    <ul class="item-container" data-bind="foreach: tools">
        <li>
            <a href="javascript:;">
                <span class="box-item-name" data-bind="text: name"></span>
                <i class="icon" data-bind="attr: {style: 'background: url(images/' + icon + ') no-repeat'}"></i>
            </a>
            <ul class="tool-item-wrapper" data-bind="foreach: $data.items">
                <li class="tool-item " data-bind="css: {'has-child':  $data.items && !!$data.items.length}">
                    <a href="javascript:;" data-bind="text: name"> </a>
                    <!-- ko if: $data.items && !!$data.items.length -->
                    <ul data-bind="foreach: items">
                        <li class="item-name"><a href="javascript:;" data-bind="text: name"> </a></li>
                    </ul>
                    <!-- /ko -->
                </li>
            </ul>
        </li>
    </ul>
</div>

我的配置:

// toolbox
    ddsmoothmenu.init({
        mainmenuid: "smoothmenu1", //Menu DIV id
        orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
        classname: 'ddsmoothmenu_2', //class added to menu's outer DIV
        method: 'hover', // set to 'hover' (default) or 'toggle'
        // arrowswap: true, // enable rollover effect on menu arrow images?
        //customtheme: ["#804000", "#482400"],
        contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    });

我试试这个小费但没有运气:

 setTimeout(function () {
        $("#smoothmenu1").find("ul").hover();
    }, 1000);

页面加载:

enter image description here

我将鼠标悬停在菜单后:

enter image description here

请帮我用简单的方法解决。

1 个答案:

答案 0 :(得分:0)

最后我找到了原因,崩溃所有菜单的事件应该是mouseleave(),而不是hover()

工作代码:

setTimeout(function () {
    $("#smoothmenu1").find("ul").mouseleave();
}, 1000);

Working Fiddle

当我深入研究jquery时,hover()的实现是:

hover: function( fnOver, fnOut ) {
        return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
    },

也许当mouseenter事件触发时,ddsmoothmenu执行某些操作并且在mouseleave事件触发器之前没有完成。