2

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

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

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

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

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

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

如您所见，span idmenuSelection是得到结果的那个。

所以我的问题是。如何替换click小提琴上显示的功能以获得menuSelection结果？

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

问候。

4

5 回答 5

1

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

资源：

<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/

于 2012-11-05T14:16:31.850 回答
1

您可以使用更改事件而不是单击

$("select").on('change' , function() {
于 2012-10-16T23:25:25.057 回答
0 
$('element.selector').on('click', function(event) {    
      event.preventDefault();
      // your logic
});
于 2012-10-31T16:26:14.423 回答
0

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

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

    //your custom code should go here:

    $('#menuSelection').text($(item).text());   
    location.href = $(item).attr('href');
};
于 2012-11-03T06:38:20.707 回答
0

有没有一种方法可以为所有级别的菜单项分配 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 元素时才会奏效。

于 2012-11-02T10:54:39.757 回答