Question

我正在尝试制作自定义移动菜单。这个想法是当用户点击V形符号时，它会 slideToggle the children UL 并将类添加到当前LI （活动）因为它会显示：阻止“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>

Answer 1

我认为这就是你要找的东西：

 $("#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);
   }
  });

http://jsfiddle.net/rzseLj27/2/

Answer 2

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

＆＃13;

jQuery(function() {
  jQuery("#menu-main-menu-m").on("click", "li i.fa", function() {  
     console.log("here");
      var li = $(this).closest("li");
      li.toggleClass("active");
      li.find(".sub-menu").slideToggle();
  });

});

＆＃13;

.menu li i {
  display: inline-block;
  cursor: pointer;
}
.menu li.active i {
  display: none;  
}

.menu li i + i {
  display: none;  
}
.menu li.active i + i {
  display: inline-block;  
}

.sub-menu { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<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>
  </li>
</ul>

＆＃13;

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

2 个答案: