Question

我正在开发一个jquery下拉菜单。（演示here）

我需要做的是获得用户选择的完整路径，并验证没有更多选项。最初的想法（在下拉菜单之前，只有常规的li / ul）是通过这个fiddle

完成的

如您所见，有验证和完整路径变量供以后使用。

现在，我想要实现的是与下拉菜单相同的事情。

这是我根据下拉菜单填写用户选择标签的代码。

<asp:Label ID="LabelMenu" text="" runat="server" /> <span id="menuSelection"></span>

如您所见，范围标识menuSelection是获得结果的标识。

所以我的问题是。对于click结果，如何替换小提琴上显示的menuSelection函数？

目标是在用户从下拉菜单中选择一个字段后获得完整路径和验证

问候。

Answer 1

您可以使用更改事件代替点击

$("select").on('change' , function() {

Answer 2

我可能会误解你，但这至少会给你一个想法。

资源：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

HTML：

<label id="LabelMenu" text="" runat="server" />
<span id="menuSelection">My Span List</span>

jQuery的：

$(document).ready(function(){
    // Flag to prevent multiple insertion
    var flag = false;
    $("#menuSelection").click(function() {
        // Prevent inserting more than 1 menu
        if (flag == false) {
            // Your menu
            $('<ul id="mylist"> <li><a href="#">First Level 1</a> <ul> <li><a href="#">FL1 Second Level 1</a></li> <li><a href="#">FL1 Second Level 2</a></li> </ul> </li> <li><a href="#">First Level 2</a> <ul> <li><a href="#">FL2 Second Level 1</a> <ul> <li><a href="#">FL2 SL1 Third Level 1</a></li> </ul> </li> <li><a href="#">FL2 Second Level 2</a> <ul> <li><a href="#">FL2 SL2 Third Level 1</a></li> </ul> </li> <li><a href="#">FL2 Second Level 3</a></li> </ul> </li> <li><a href="#">First Level 3</a> <ul> <li><a href="#">FL3 Second Level 1</a> <ul> <li><a href="#">FL3 SL1 Third Level 1</a></li> <li><a href="#">FL3 SL1 Third Level 2</a></li> </ul> </li> <li><a href="#">FL3 Second Level 2</a></li> <li><a href="#">FL3 Second Level 3</a> <ul> <li><a href="#">FL3 SL3 Third Level 1</a></li> </ul> </li> </ul> </li> <li><a href="#">First Level 4</a> </li> </ul>'
             ).insertAfter($(this)).menu().focus().focusout(function() {
                // When out of menu remove this instance
                $(this).empty().remove();
                // Flag false again
                flag = false;
            });
            // Find which menu item is clicked
            $('#mylist a').click(function() {
                var route=$(this).parent().text();
                if($(this).next().length==0){
                    alert('no more levels');
                    alert(route);
                    $('#LabelMenu').text(route);
                }else{
                    alert(route);
                    $('#LabelMenu').text($(this).text());
                }
            });
        }
        // Change flag on click
        flag = true;
    });
});

小提琴：http://jsfiddle.net/BerkerYuceer/gp6H5/

Answer 3

$('element.selector').on('click', function(event) {    
      event.preventDefault();
      // your logic
});

Answer 4

有没有办法可以为所有级别的菜单项分配ID。如果是这样，这些ID可以是渐进的。即主菜单中的ID可以是1,2,3,4,5,6。如果3,4,5进一步延伸，则子菜单可以包含（3_1,3_2,3_3），（4_1,4_2）等条目。

这样，当您最终选择一个元素时，您可以使用该ID获取从您遍历此选项的位置的完整限定路径。

只有在某种程度上你可以将id推送到所有li元素时，这才会有用。

Answer 5

可以在你的插件文件中进行更改有功能this.chooseItem他们你可以写你的东西

      this.chooseItem = function(item){
    menu.kill();

    //your custom code should go here:

    $('#menuSelection').text($(item).text());   
    location.href = $(item).attr('href');
};

如何用span id替换click功能

5 个答案: