Показать UL родительского LI по щелчку

Я пытаюсь выяснить jQuery, который мне нужно написать для следующей функции. Когда кто-то нажимает на span 'expand', я надеюсь, что я смогу показать подменю (UL) LI, содержащее нажатый пробел.Показать UL родительского LI по щелчку

По умолчанию дочерний 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', я думаю, что он должен быть выбран с помощью прямого дочернего селектора'> '. –

'span.arrow' должен остановиться, без обид. Почему вы слишком квалифицировали своих селекционеров? '$ ('. arrow')' было бы столь же эффективным и, вероятно, более эффективным. И он не будет полагаться на HTML. – ZenMaster

@ ZenMaster Извините. Я изменю его. Im микро оптимизирующий урод. Я склонен думать, что существует несколько элементов с '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' REALLY это решение? –

Показать UL родительского LI по щелчку

ответ

Смежные вопросы