javascript - Select Custom Attribute from nested LI -
i have menu item looks below, in case have parent groupid=5 analytics. trying to-do when click on li want select link-id ... got work easily.
no problem comes in, how can select link-id="22" , link-id="23" without triggering link-id=21 because in case link-id=21 sub menu.
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> select link
$("ul[sub-groupid] > li").click(function (e) { navigationmenu.app.setlinkid($(this).attr('link-id')); }); so in nutshell, want able select link-id if link-id has submenu, want select submenu's link-id
you can use click handler [sub-groupid] element, find closest li clicked element , 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>
Comments
Post a Comment