在寫(xiě)wordpress移動(dòng)端左側(cè)菜單功能時(shí)有子菜單，并且有一個(gè)文件夾的圖標(biāo)，當(dāng)點(diǎn)擊這個(gè)子項(xiàng)的時(shí)候，他的子目錄會(huì)打開(kāi)，并且圖標(biāo)為原來(lái)的文件夾圖標(biāo)切換成文件夾打開(kāi)狀態(tài)的圖標(biāo)。今天講講WordPress移動(dòng)端左側(cè)菜單含有子菜單圖標(biāo)切換處理。

實(shí)現(xiàn)方法

wordpress導(dǎo)航菜單中，如果含有子菜單的，那這個(gè)li的class里都含有一個(gè)：.menu-item-has-children的樣式，當(dāng)點(diǎn)擊項(xiàng)目時(shí)，執(zhí)行以下代碼：

//默認(rèn)子項(xiàng)隱藏：

$('.mobile-menu-wrap .menu-item-has-children a').next().hide();

//點(diǎn)擊時(shí)執(zhí)行：

$('.mobile-menu-wrap .menu-item-has-children a').click(function(){

$(this).toggleClass('menu-item-open').next().slideToggle();

})

有了menu-item-open這個(gè)樣式后，就可以處理打開(kāi)與未打開(kāi)圖標(biāo)的切換了

//默認(rèn)未打開(kāi)子菜單時(shí)的文件夾圖標(biāo)：

.mobile-menu-wrap .menu-item-has-children>a:before {

content:"f114";

font-family: FontAwesome;

display: inline-block;

margin-right: 10px;

color: #666;

transition:all 0.5s;

}

//打開(kāi)子菜單時(shí)切換圖標(biāo)：

.mobile-menu-wrap .menu-item-open:before {

content:"f115"!important;

}