[英]jquery on click function not working with list-items
I have a sub menu with a few items. 我有一个包含一些项目的子菜单。 When I click on a list item it is supposed to add a class closed-menu
. 当我单击列表项时,应该添加一个closed-menu
类。
I used the click function but when I inspect, I can't really see the class. 我使用了click函数,但是当我检查时,我看不到该类。
$(document).ready(function() {
$('li.current-menu-item').click(function() {
$(this).addClass('closed-menu-item');
});
});
For testing purposes I used this code to automatically just add the same class and it worked: 为了进行测试,我使用以下代码自动添加了相同的类,并且可以正常工作:
$("li.current-menu-item").addClass("closed-menu");
So, how can I add the class only when I click on the list item? 那么,如何仅在单击列表项时才添加班级?
Note: I am developing the site using WordPress undersocres starter theme so here is the entire js: 注意:我正在使用WordPress undersocres入门主题开发站点,所以这里是整个js:
( function( $ ) {
var container, button, menu, links, subMenus, i, len;
container = document.getElementById( 'site-navigation' );
if ( ! container ) {
return;
}
button = container.getElementsByTagName( 'button' )[0];
if ( 'undefined' === typeof button ) {
return;
}
menu = container.getElementsByTagName( 'ul' )[0];
// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
button.style.display = 'none';
return;
}
menu.setAttribute( 'aria-expanded', 'false' );
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
menu.className += ' nav-menu';
}
button.onclick = function() {
if ( -1 !== container.className.indexOf( 'toggled' ) ) {
container.className = container.className.replace( ' toggled', '' );
button.setAttribute( 'aria-expanded', 'false' );
menu.setAttribute( 'aria-expanded', 'false' );
} else {
container.className += ' toggled';
button.setAttribute( 'aria-expanded', 'true' );
menu.setAttribute( 'aria-expanded', 'true' );
}
};
// Get all the link elements within the menu.
links = menu.getElementsByTagName( 'a' );
subMenus = menu.getElementsByTagName( 'ul' );
// Set menu items with submenus to aria-haspopup="true".
for ( i = 0, len = subMenus.length; i < len; i++ ) {
subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
}
// Each time a menu link is focused or blurred, toggle focus.
for ( i = 0, len = links.length; i < len; i++ ) {
links[i].addEventListener( 'focus', toggleFocus, true );
links[i].addEventListener( 'blur', toggleFocus, true );
}
/**
* Sets or removes .focus class on an element.
*/
function toggleFocus() {
var self = this;
// Move up through the ancestors of the current link until we hit .nav-menu.
while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
// On li elements toggle the class .focus.
if ( 'li' === self.tagName.toLowerCase() ) {
if ( -1 !== self.className.indexOf( 'focus' ) ) {
self.className = self.className.replace( ' focus', '' );
} else {
self.className += ' focus';
}
}
self = self.parentElement;
}
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
/**
* Toggles `focus` class to allow submenu access on tablets.
*/
( function( container ) {
var touchStartFn, i,
parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
if ( 'ontouchstart' in window ) {
touchStartFn = function( e ) {
var menuItem = this.parentNode, i;
if ( ! menuItem.classList.contains( 'focus' ) ) {
e.preventDefault();
for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
if ( menuItem === menuItem.parentNode.children[i] ) {
continue;
}
menuItem.parentNode.children[i].classList.remove( 'focus' );
}
menuItem.classList.add( 'focus' );
} else {
menuItem.classList.remove( 'focus' );
}
};
for ( i = 0; i < parentLink.length; ++i ) {
parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
}
}
}( container ) );
function initMainNavigation( container ) {
// Add dropdown toggle that display child menu items.
container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
// Toggle buttons and submenu items with active children menu items.
container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' );
container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
container.find( '.dropdown-toggle' ).click( function( e ) {
var _this = $( this );
e.preventDefault();
_this.toggleClass( 'toggle-on' );
_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
} );
}
initMainNavigation( $( '.main-navigation' ) );
// Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states.
$( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {
if ( 'primary' === params.wpNavMenuArgs.theme_location ) {
initMainNavigation( params.newContainer );
// Re-sync expanded states from oldContainer.
params.oldContainer.find( '.dropdown-toggle.toggle-on' ).each(function() {
var containerId = $( this ).parent().prop( 'id' );
$( params.newContainer ).find( '#' + containerId + ' > .dropdown-toggle' ).triggerHandler( 'click' );
});
}
});
$(document).ready(function(){
$("li.current-menu-item").click(function(){
$(this).addClass("closed-menu");
});
});
} )( jQuery );
Perhaps one of the functions is preventing functionalities on the new code am trying to add. 可能其中一项功能是阻止尝试添加新代码的功能。
If your items are dynamically added use event delegation & don't forget to prevent the default click 如果您的商品是动态添加的,请使用事件委托&不要忘记阻止默认点击
$(document).ready(function(){
$('body').on('click','li.current-menu-item', function(e){
e.preventDefault();
$(this).addClass('closed-menu-item');
});
});
Please see below snippet it may help you. 请参见下面的代码片段,它可能会对您有所帮助。
$(document).ready(function() { $('li.current-menu-item').click(function() { $(this).addClass('closed-menu-item'); alert("added in " + $(this).html()); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="current-menu-item">Test1</li> <li class="current-menu-item">Test2</li> <li class="current-menu-item">Test3</li> <li class="current-menu-item">Test4</li> </ul>
Could it be so that your list items are loaded later into the DOM? 是否可以将您的列表项稍后加载到DOM中? In this case, you could use delegation : 在这种情况下,您可以使用委托 :
function($) {
$(document).ready(function() {
$('html,body').delegate('li.current-menu-item', 'click', function() {
$(this).addClass('closed-menu-item');
});
console.log('jQuery is working correctly.');
});
})(jQuery);
Also, make sure jQuery is loaded correctly, that's why I used 另外,请确保正确加载jQuery,这就是我使用的原因
function($) {
...
})(jQuery)
as a wrapper. 作为包装。
I have tried your code : 我已经尝试过您的代码:
<body>
<script src="jquery.js"></script>
<script src="main.js"></script>
<ul>
<li class="current-menu-item">TEST 1</li>
<li class="current-menu-item">TEST 2</li>
<li class="current-menu-item">TEST 3</li>
<li class="current-menu-item">TEST 4</li>
</ul>
</body>
And the script : 和脚本:
jQuery(document).ready(function($) {
$('li.current-menu-item').click(function() {
$(this).addClass('closed-menu-item');
});
});
It works well, so I think there is something more in your code that break your functionnalities. 它运作良好,所以我认为您的代码中还有更多功能破坏了功能。
//
method=$('elemant');
$(Document).ready(function()
{
method.bind("click", function ()
{
methodClick($(this))
});
function methodClick(t)
{
//your code
}
)};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.