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如果存在

回答

相關問題