jQuery onclick ul li我和显示的孩子ul如果存在

我想制作一个自定义的移动菜单。这个想法是当用户点击雪佛龙时 - 它会slideToggle儿童UL并添加类到当前LI（活动）以及它将显示：块“chevron-down”和显示：无“雪佛龙权”。换句话说，箭头将从右向下改变。jQuery onclick ul li我和显示的孩子ul如果存在

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>

来源

2015-11-02 Alexander Georgiev

那么，什么是问题？你不知道如何显示和隐藏箭头？ – epascarello

jQuery显然是错误的。当我点击箭头时，它现在不做任何事情。是的，我需要添加箭头的代码来显示和隐藏。 –

'li i.fa-chevron'什么都不匹配，所以没有元素会被点击绑定。 – epascarello

我认为这是你在找什么：

$("#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/

来源

2015-11-02 19:58:55 DinoMyte

差不多。活动类不会被添加。此外，我需要隐藏雪佛龙右侧并显示雪佛龙羽绒。 –

已更新代码。按照下一个小提琴链接 – DinoMyte

在这个例子中，我用文字。但是您可以使用图像并使用classname而不是文本。 – DinoMyte

基本思路使用CSS和双将单击事件发送给元素。

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

 
});

.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; }

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

来源

2015-11-02 20:07:39 epascarello

这也适用。我只需要显示向下人字形和隐藏当前（右人字形）。 2种方式 - 1.将课堂从fa-chevron-right改为fa-chevron-bottom 2. display：none to chevron-right and display：block to chevron-bottom –

jQuery onclick ul li我和显示的孩子ul如果存在

回答

相关问题