點擊顯示母公司LI的UL

我想弄清楚我需要爲以下函數編寫的jQuery。當有人點擊跨度「展開」時，我希望能夠顯示包含點擊範圍的LI的子菜單（UL）。點擊顯示母公司LI的UL

默認情況下，子UL是通過CSS隱藏的，但是當展開被點擊時，我想顯示它。

例如，見下面我的代碼...

<li id="menu-item-15031" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-page-parent current_page_ancestor menu-item-15031"><a href="http://www.tintworld.com/automotive-services/">Automotive Services</a> 
<ul class="sub-menu"> 
    <li id="menu-item-15039" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-15039"><a href="http://www.tintworld.com/automotive-services/window-tinting/">Window Tinting</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-15033" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-484 current_page_item menu-item-15033"><a href="http://www.tintworld.com/automotive-services/car-window-tinting/">Car Window Tinting</a></li> 
      <li id="menu-item-15040" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15040"><a href="http://www.tintworld.com/automotive-services/computer-cut-film-system/">Computer Cut Window Tint System</a></li> 
      <li id="menu-item-15041" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15041"><a href="http://www.tintworld.com/automotive-services/solar-window-tint/">Solar Window Tint</a></li> 
      <li id="menu-item-15042" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15042"><a href="http://www.tintworld.com/automotive-services/custom-tint-designs/">Custom Tint Designs</a></li> 
      <li id="menu-item-15043" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15043"><a href="http://www.tintworld.com/automotive-services/removing-window-tint/">Removing Window Tint</a></li> 
      <li id="menu-item-15044" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15044"><a href="http://www.tintworld.com/automotive-services/window-tint-regulations/">Window Tint Regulations</a></li> 
     </ul> 
    </li> 
</ul> 
<span class="arrow"></span> 
</li>

我知道jQuery是超級容易，但老實說，我累壞了，不能換我的腦海裏圍繞它現在。

請幫幫我。 :)

來源

2013-05-30 Brian Schroeter

「老實說我已經筋疲力盡，現在無法將我的思緒籠罩它」=>休息一下，明天再回來，如果可能的話 – lc2817

嘗試其中任何。請大家烏爾疲憊的心靈:)

$(".arrow").click(function() { 
$(this).closest("li").find("ul.sub-menu").slideToggle("slow"); 
});

或者

$(".arrow").click(function() { 
$(this).prev("ul.sub-menu").slideToggle("slow"); 
});

或者

$(".arrow").click(function() { 
$(this).siblings("ul.sub-menu").slideToggle("slow"); 
});

來源

2013-05-30 04:56:00 krishgopinath

因爲'.sub-menu'在兒童中不止一個'li'，我認爲它必須用直接子選擇器'>'來選擇。 – 2013-05-30 04:59:18

'span.arrow'必須停下來，不要冒犯。爲什麼你會過分限定你的選擇器？ '$（'。arrow'）'本來是一樣有效的，可能性能更高。它不會依賴於HTML。 – ZenMaster

@ZenMaster對不起。我會改變它。我是一個微型優化怪胎。我傾向於認爲'class = arrow'有多個元素，所以我傾向於用元素名稱來簡化對JS引擎的搜索。 – krishgopinath

試試下面的代碼

$("span").click(function(thisElement) 
{ 
    $("#menu-item-15031 > ul").css("display","block"); 
});

您也可以使用此：

$(".arrow").click(function() { 
    $(this).closest("li").find("ul.sub-menu").slideToggle("slow"); 
});

來源

2013-05-30 05:04:01 manish

'：O'真的這是一個解決方案？ – 2013-05-30 05:04:54

點擊顯示母公司LI的UL

回答

相關問題