Lea*_*ode 1 javascript jquery jquery-ui submenu jquery-ui-menu
我在我的应用程序中使用jquery菜单。我有3个级别的子菜单。就像下面的jsfiddle中显示的那样。
http://jsfiddle.net/ankitap/WC3bE/
当我们在菜单选项上进行鼠标悬停时,子菜单将自动打开。我想禁用此功能,并且只想在单击时打开子菜单。我尝试使用:
$( "#menu a" ).menu({ role: null });
Run Code Online (Sandbox Code Playgroud)
我还尝试将1级类名作为主类,将2级类名作为子类。
<script>
$("#menu").menu();
$("#menu a").click(function() {
console.log($(this).text()); // gets text contents of clicked li
$(".subclass a").show();
});
$("#menu a").click(function() {
$(".subclass a").hide();
});
</script>
Run Code Online (Sandbox Code Playgroud)
的html代码是:
<ul id="menu" class="mainclass">
<li><a href="#">Aberdeen</a></li>
<li><a href="#">Ada</a></li>
<li><a href="#">Adamsville</a></li>
<li><a href="#">Addyston</a></li>
<li>
<a href="#">Delphi</a>
<ul class="subclass">
<li >
<a href="#">Ada</a>
<ul>
<li>
<a href="#">ankita</a>
</li>
</ul>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li><a href="#">Saarland</a></li>
<li>
<a href="#">Salzburg</a>
<ul class="subclass">
<li>
<a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li>
<a href="#">Delphi</a>
<ul>
<li><a href="#">Ada</a></li>
<li><a href="#">Saarland</a></li>
<li><a href="#">Salzburg</a></li>
</ul>
</li>
<li><a href="#">Perch</a></li>
</ul>
</li>
<li><a href="#">Amesville</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)
我无法停止鼠标悬停时打开子菜单。我希望子菜单仅在单击后才能打开。请帮助!谢谢。
没有js / jquery专家,但可能取消绑定mouseenter和mouseleave事件
$("#menu").menu(/*{
select: function( event, ui ) {
var selection = ui.item.text();
var get=this.event;
console.log(get);
}}*/);
$('#menu').unbind('mouseenter mouseleave');
$("#menu a").click(function() {
console.log($(this).text());
});
Run Code Online (Sandbox Code Playgroud)
注意$('#menu').unbind('mouseenter mouseleave');声明