0

我试图找出我需要为以下函数编写的 jQuery。当有人单击跨度“扩展”时，我希望我可以显示包含单击的跨度的 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 非常简单，但老实说，我已经筋疲力尽，现在无法全神贯注。

请帮我。:)

4

2 回答 2

2

尝试其中任何一个。请让你疲惫的心灵休息一下：）

$(".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-30T04:56:00.937 回答
0

试试下面的代码

$("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-30T05:04:01.653 回答