从嵌套的LI中选择“自定义属性”

Question

我有一个看起来像下面的菜单项，现在在这种情况下，我有一个父组为groupId=5的Analytics（分析）。 现在我想做的是，当我单击一个LI时，我想选择link-id ...现在，我可以轻松地工作了。

没有问题出现，如何在不触发link-id=21情况下选择link-id="22"和link-id="23" ，因为在这种情况下， link-id=21是另一个子菜单。

的HTML

<li groupid="5">
                <a href="#">
                    <i class="fa fa-line-chart"></i>
                    <span class="nav-label">Analytics</span>
                    <span class="fa arrow"></span>
                </a>
                <ul sub-groupid="5" class="nav nav-second-level">
                    <li link-id="13"><a href="#">Overview</a></li>
                    <li link-id="19"><a href="#">Social Report Card</a></li>
                    <li link-id="20">@Html.ActionLink("Reputation Report Card", "ReputationReportCard", "Reports", new { area = "Analytics" }, null)</li>
                    <li link-id="21">
                        <a href="#">
                            <span class="nav-label">Facebook Snapshot</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-third-level">
                            <li link-id="22">@Html.ActionLink("Overview", "Index", "Overview", new { area = "Analytics" }, null)</li>
                            <li link-id="23">@Html.ActionLink("Content", "Index", "Content", new { area = "Analytics" }, null)</li>
                        </ul>
                    </li>
                </ul>
            </li>

选择链接

   $("ul[sub-groupid] > li").click(function (e) {
        NavigationMenu.App.SetLinkId($(this).attr('link-id'));
    });  

简而言之，我希望能够选择link-id但是如果link-id有一个子菜单，我希望选择该子菜单的链接ID。

Answer 1

您可以为[sub-groupid]元素使用点击处理程序，然后找到与被点击元素最接近的li ，然后获取其link-id

 $("ul[sub-groupid]").click(function(e) { alert($(e.target).closest('li[link-id]').attr('link-id')); NavigationMenu.App.SetLinkId($(e.target).closest('li[link-id]').attr('link-id')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li groupid="5"> <a href="#"> <i class="fa fa-line-chart"></i> <span class="nav-label">Analytics</span> <span class="fa arrow"></span> </a> <ul sub-groupid="5" class="nav nav-second-level"> <li link-id="13"><a href="#">Overview</a></li> <li link-id="19"><a href="#">Social Report Card</a></li> <li link-id="20">@Html.ActionLink("Reputation Report Card", "ReputationReportCard", "Reports", new { area = "Analytics" }, null)</li> <li link-id="21"> <a href="#"> <span class="nav-label">Facebook Snapshot</span> <span class="fa arrow"></span> </a> <ul class="nav nav-third-level"> <li link-id="22">@Html.ActionLink("Overview", "Index", "Overview", new { area = "Analytics" }, null)</li> <li link-id="23">@Html.ActionLink("Content", "Index", "Content", new { area = "Analytics" }, null)</li> </ul> </li> </ul> </li> </ul> 

Answer 2

我想您应该使用它：

$("ul[sub-groupid] li").click(function (e) {
    var lid = $(this).has('ul') 
              ? $(this).find('li').attr('link-id') 
              : $(this).attr('link-id');
    NavigationMenu.App.SetLinkId(lid);
});

Answer 3

 $("ul[sub-groupid] li").click(function (e) { e.stopPropagation(); alert($(this).attr('link-id')) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li groupid="5"> <a href="#"> <i class="fa fa-line-chart"></i> <span class="nav-label">Analytics</span> <span class="fa arrow"></span> </a> <ul sub-groupid="5" class="nav nav-second-level"> <li link-id="13"><a href="#">Overview</a></li> <li link-id="19"><a href="#">Social Report Card</a></li> <li link-id="20">@Html.ActionLink("Reputation Report Card", "ReputationReportCard", "Reports", new { area = "Analytics" }, null)</li> <li link-id="21"> <a href="#"> <span class="nav-label">Facebook Snapshot</span> <span class="fa arrow"></span> </a> <ul class="nav nav-third-level"> <li link-id="22">@Html.ActionLink("Overview", "Index", "Overview", new { area = "Analytics" }, null)</li> <li link-id="23">@Html.ActionLink("Content", "Index", "Content", new { area = "Analytics" }, null)</li> </ul> </li> </ul> </li>