JQuery $ (это) селектор не работает в функции

Question

Я пытаюсь сделать функцию, которая будет срабатывать с событием «OnClick» из в процедурном добавленной div.hb-меню-subMenuToggle элемента , Функция работает при использовании начального выбора, как угодно, но «$ (это)»

// FUNCTION: hbMenuSubToggle() 
// Toggles CSS classes for animation of .hb-menu-sub-open. Fires when clicking the div element with .hb-menu-subMenuToggle class 
function hbMenuSubToggle(){ 

    // TESTING: This works as far as opening the submenus; however, it does not open only the submenu that is a direct sibling of the hb-menu-subMenuToggle element. 
    $('a.withSubmenu').siblings('ul').toggleClass('hb-menu-sub-open'); 

    // DESIRED EFFECT: Does not work 
    $(this).siblings('ul').toggleClass('hb-menu-sub-open'); 
}; 

Вот ссылка на Codepen Project

Любая помощь будет высоко ценится!

Answer 1

правильным способом сделать это было бы использовать обработчики событий jQuery, а не использовать onClick и функцию, встроенную в ваш HTML.

Например, если вы разместите это в своем $(document).ready(), он присоединяет обработчик события клика ко всем A элементам в вашем верхнем меню. Когда он будет нажат, вы сможете получить $(this) (который является элементом A), а затем перейдите к его родительскому элементу (элемент UL), а затем найдите дочерние элементы UL (подменю) для переключения класса.

$('#main-nav>ul>li').on('click', '>a', function(){ 
    $(this).parent().find('ul').toggleClass('hb-menu-sub-open'); 
}); 

Аналогично ваша функция, чтобы показать главное меню можно также записать следующим образом

$(document).on('click', '.hb-menu-btn', function(){ 
    $('.hb-menu-btn, .hb-menu, .hb-menu-page').toggleClass('hb-menu-open'); 
}); 

Посмотри работает на CodePen здесь: http://codepen.io/anon/pen/rOKQOJ

Answer 2

function hbMenuSubToggle(divyouneed){ 

// TESTING: This works as far as opening the submenus; however, it does not open only the submenu that is a direct sibling of the hb-menu-subMenuToggle element. 
$('a.withSubmenu').siblings('ul').toggleClass('hb-menu-sub-open'); 

// DESIRED EFFECT: Does not work 
divyouneed.siblings('ul').toggleClass('hb-menu-sub-open'); 
}; 

и использовать его

hbMenuSubToggle($(this)) 

Answer 3

за $ (это), вы должны были выбраны один элемент прежде. В функции вы не имеете его, как это .. Так что это будет работать только если вы выбираете его непосредственно, а не $ (это)

function hbMenuSubToggle() { 
    $('.blablabla').blablabla(); 
} 

И прочитал this, чтобы узнать больше о jQuerys основах