我使用knockout将项目绑定到我的菜单,我使用了ddsmoothmenu
。但是当页面加载时,菜单会展开里面的所有项目,我希望它崩溃所有ultil用户悬停。
请参阅我的附件图片。
我的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);
页面加载:
我将鼠标悬停在菜单后:
请帮我用简单的方法解决。
答案 0 :(得分:0)
最后我找到了原因,崩溃所有菜单的事件应该是mouseleave()
,而不是hover()
。
工作代码:
setTimeout(function () {
$("#smoothmenu1").find("ul").mouseleave();
}, 1000);
当我深入研究jquery
时,hover()
的实现是:
hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
},
也许当mouseenter
事件触发时,ddsmoothmenu
执行某些操作并且在mouseleave
事件触发器之前没有完成。