Question

我有一个类似于下面的菜单项，现在在这种情况下，我有一个父groupId=5，即Analytics。现在我想要做的就是当我点击LI我想要选择link-id ...现在我可以轻松地工作了。

没有问题，如何选择link-id="22"和link-id="23" 不触发link-id=21，因为在这种情况下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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: