Javascript jQuery onclick ul li i并显示子ul（如果存在）

我正在尝试制作一个定制的移动菜单。这个想法是当用户点击V形右键时，它将滑动切换子级UL，并将类添加到当前LI（活动的），同时它将显示：block“chevron down”和显示：none“chevron right”。换句话说，箭头将从右改为下

    jQuery(function(){

  jQuery("#menu-main-menu-m li i.fa-chevron").click(function() {
    if(jQuery(this).closest("li").children("ul").length) {
    jQuery(this).toggleClass('active');
    jQuery(this).children('ul').slideToggle(500);

}
else {

}
  });

});

这是HTML

<ul id="menu-main-menu-m" class="menu"><li id="menu-item-3" class="menu-item-has-children menu-item-3 menu-item-ancestor"><a href="#">Open Account</a><i class="fa fa-chevron-right"></i><i class="fa fa-chevron-down"></i><ul class="sub-menu"><li>....</li><li></li></ul>

---

我想这就是你想要的：

 $("#menu-main-menu-m i[class*='fa-chevron']").click(function() {
    if($(this).closest("li").children("ul").length) {
      $(this).text($(this).text() == "Right" ? "Down" : "Right");
    $(this).closest("li").children("ul").toggleClass('active');
    $(this).closest("li").children("ul").slideToggle(500);
   }
  });

---

我想这就是你想要的：

 $("#menu-main-menu-m i[class*='fa-chevron']").click(function() {
    if($(this).closest("li").children("ul").length) {
      $(this).text($(this).text() == "Right" ? "Down" : "Right");
    $(this).closest("li").children("ul").toggleClass('active');
    $(this).closest("li").children("ul").slideToggle(500);
   }
  });

---

使用CSS并将单击事件绑定到元素的基本思想

jQuery（函数（）{
jQuery（“#menu-main-menu-m”）。在（“单击”，“li i.fa”，function（）{
console.log（“此处”）；
var li=$（此）；
li.切换类别（“主动”）；
li.find（“.sub-menu”）.slideToggle（）；
});
});
.menu li i{
显示：内联块；
光标：指针；
}
.菜单李{
显示：无；
}
.菜单li i+i{
显示：无；
}
.菜单li.活动i+i{
显示：内联块；
}
.子菜单{显示：无；}








使用CSS并将单击事件绑定到元素的基本思想


jQuery（函数（）{
jQuery（“#menu-main-menu-m”）。在（“单击”，“li i.fa”，function（）{
console.log（“此处”）；
var li=$（此）；
li.切换类别（“主动”）；
li.find（“.sub-menu”）.slideToggle（）；
});
});
.menu li i{
显示：内联块；
光标：指针；
}
.菜单李{
显示：无；
}
.菜单li i+i{
显示：无；
}
.菜单li.活动i+i{
显示：内联块；
}
.子菜单{显示：无；}








那么问题出在哪里？您不知道如何显示和隐藏箭头？jQuery显然是错误的。当我单击箭头时，它现在没有任何作用。是的，我需要为要显示和隐藏的箭头添加代码。
li I.fa-chevron
不匹配任何内容，因此单击不会绑定任何元素。那么问题是什么？您不知道如何显示和隐藏箭头？jQuery显然是错误的。当我单击箭头时，它现在没有任何作用。是的，我需要为要显示和隐藏的箭头添加代码。
li I.fa-chevron
不匹配任何内容，因此没有元素会与click.smart绑定。未添加活动类。此外，我还需要隐藏V形右侧并显示V形向下。在示例中，我使用了文本。但是你可以使用图片和类名来代替文本。谢谢你，但是我正在努力将V形改为V形底部类。我这样做了：jQuery（this）.removeClass（“fa-chevron-right”）.addClass（“fa-chevron-down”）；但是，当菜单关闭时，向下箭头保持不变。我需要正确的箭头。换句话说，是否有一种方法可以在现有类（右fa V形）和（下fa V形）之间切换，反之亦然。Toggle.class不起作用，因为它添加和删除了新添加的类。我需要一个全新的类并删除旧类。请尝试以下操作：。它对css图像切换进行了更改。谢谢！顺便说一句，我希望LI是积极的，所以。儿童（“ul”）应该删除这一行。再次感谢：）差不多了。未添加活动类。此外，我还需要隐藏V形右侧并显示V形向下。在示例中，我使用了文本。但是你可以使用图片和类名来代替文本。谢谢你，但是我正在努力将V形改为V形底部类。我这样做了：jQuery（this）.removeClass（“fa-chevron-right”）.addClass（“fa-chevron-down”）；但是，当菜单关闭时，向下箭头保持不变。我需要正确的箭头。换句话说，是否有一种方法可以在现有类（右fa V形）和（下fa V形）之间切换，反之亦然。Toggle.class不起作用，因为它添加和删除了新添加的类。我需要一个全新的类并删除旧类。请尝试以下操作：。它对css图像切换进行了更改。谢谢！顺便说一句，我希望LI是积极的，所以。儿童（“ul”）应该删除这一行。再次感谢：）这同样有效。我只需要显示向下的V形并隐藏当前的（右V形）。2种方式-1。将类别从左V形右侧更改为左V形底部2。显示：无到V形右侧，显示：块到V形底部这也适用。我只需要显示向下的V形并隐藏当前的（右V形）。2种方式-1。将类别从左V形右侧更改为左V形底部2。显示：无到V形右侧，显示：块到V形底部