如何在单击菜单项而不是悬停时打开子菜单

时间:2015-09-25 07:28:45

标签: javascript jquery css

我想在按钮单击而不是悬停

上打开此子菜单
 <div id="container" style="width: 250px;">
        <ul id="filter-menu-button-menu">
            <li><a href="#"><span class="ui-icon ui-icon-disk"></span>A</a>
            </li>
            <li><a href="#"><span class="ui-icon ui-icon-disk"></span>B</a>
            </li>
            <li><a href="#"><span class="ui-icon ui-icon-folder-open"></span>C</a>

                <ul>
                    <li><a href="#">1A</a>
                    </li>
                    <li><a href="#">1B</a>
                    </li>
                    <li><a href="#">1C</a>
                    </li>
                    <li><a href="#">1D</a>
                    </li>
                    <li><a href="#">1E</a>

                        <ul>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">1</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">2</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">3</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">4</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">5</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">6</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">7</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">8</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">1F</a>

                        <ul>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">1</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">2</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">3</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">4</a>
                            </li>
                            <li><span class="ui-icon ui-icon-trash"></span><a href="#">5</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>


jquery code

$('#filter-menu-button-menu').menu({
    "position": {
        collision: 'flipfit'
    }
});

每件事情都运转良好,但我想点击菜单项而不是悬停打开子菜单。

这里是js小提琴链接 http://jsfiddle.net/apaul34208/tAH6a/17/

感谢advence

2 个答案:

答案 0 :(得分:1)

添加

$('#filter-menu-button-menu').unbind('mouseenter mouseleave');

$('#filter-menu-button-menu').menu({
"position": {
    my: "right top",
    at: "left top",
    collision: 'flipfit'
}
});

看看这个:

http://docs.mongodb.org/getting-started/node/update/

答案 1 :(得分:1)

使用以下代码。取消绑定mouseenter mouseleave个事件。

DEMO

$('#filter-menu-button-menu').menu({
  "position": {
    my: "right top",
    at: "left top",
    collision: 'flipfit'
   }
 });

 $('#filter-menu-button-menu').unbind('mouseenter mouseleave');