Question

我有一个HTML菜单，其中包含父菜单，子菜单和每个子菜单下，可能还有其他子菜单等...

现在，我需要在父菜单中添加一个图标（条形图）。具有子菜单的子菜单。对于具有其他子菜单的子菜单，此图标添加过程也应该相同！我希望这是有道理的。

目前，使用下面的代码，我可以将图标添加到具有子菜单的父菜单中，但这似乎不适用于子菜单下的子菜单！

每个元素都有相同的类名.MyLi，所以我不明白为什么它只将图标添加到父菜单而不是子菜单。

这是我的小提琴代码：

这是我使用的jQuery代码：

$('.MyLi:has(ul)').each(function () {
  $(this).html($(this).html()+' <i style="position:absolute; top:0; right:20px;font-size:20px;" class="fa fa-bars mybars" aria-hidden="true"></i>');
 });

有人可以就此问题提出建议吗？

Answer 1

如果我理解你的问题和要求，这可能是你试图做的事情吗？

我更改了样式position和left，将图标放在<li>前面。但是，最好在图标中添加一个类并控制该类中的CSS。

$('.MyLi:has(ul)').each(function() {
  $(this).prepend('<i style="position:relative; top:0; left:0px;font-size:20px;" class="fa fa-bars mybars" aria-hidden="true"></i>');
});

.MyLi {
  color: grey;
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="MyLi Home" data-cont="Home" id="2"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Home</a>
  <ul>
    <li class="MyLi Management Policies" data-cont="Management Policies" id="52"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Management Policies</a>
      <ul>
        <li class="MyLi Abuse" data-cont="Abuse" id="87"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Abuse</a></li>
        <li class="MyLi Communication" data-cont="Communication" id="89"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Communication</a></li>
        <li class="MyLi Confidentiality" data-cont="Confidentiality" id="97"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Confidentiality</a></li>
        <li class="MyLi Food and Drink" data-cont="Food and Drink" id="95"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Food and Drink</a></li>
        <li class="MyLi Health and Safety" data-cont="Health and Safety" id="91"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Health and Safety</a></li>
        <li class="MyLi Moving and Handling" data-cont="Moving and Handling" id="93"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Moving and Handling</a></li>
        <li class="MyLi Worksheet" data-cont="Worksheet" id="99"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Worksheet</a></li>
      </ul>
    </li>
    <li class="MyLi Mental Health" data-cont="Mental Health" id="54"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Mental Health</a>
      <ul>
        <li class="MyLi Aggression and Abuse" data-cont="Aggression and Abuse" id="109"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Aggression and Abuse</a></li>
        <li class="MyLi Game" data-cont="Game" id="973"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Game</a></li>
        <li class="MyLi Health Assessments" data-cont="Health Assessments" id="101"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Health Assessments</a></li>
        <li class="MyLi Medications" data-cont="Medications" id="112"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Medications</a></li>
        <li class="MyLi Mental Disorders" data-cont="Mental Disorders" id="105"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Mental Disorders</a></li>
        <li class="MyLi Other Articles" data-cont="Other Articles" id="114"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Other Articles</a></li>
      </ul>
    </li>
    <li class="MyLi Quality Assurance" data-cont="Quality Assurance" id="47"><a><i></i>&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Quality Assurance</a></li>
  </ul>
</li>

jQuery：如何获取子菜单的子菜单？

1 个答案: