Question

我有一个带有几个项目的子菜单。当我点击列表项时，它应该添加一个类closed-menu。

我使用了点击功能但是当我检查时，我真的看不到这个类。

$(document).ready(function() {
   $('li.current-menu-item').click(function() { 
       $(this).addClass('closed-menu-item');
   });
 });

出于测试目的，我使用此代码自动添加相同的类并且它有效：

$("li.current-menu-item").addClass("closed-menu");

那么，如何在单击列表项时添加该类？

注意：我正在使用WordPress undersocres starter主题开发网站，所以这里是整个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 );

也许其中一个功能是阻止新代码尝试添加功能。

Answer 1

如果您的商品是动态添加的，请使用事件委托＆amp;不要忘记阻止默认点击

<form  enctype="multipart/form-data" >
<input name="file" type="file">
...
</form>

Answer 2

请参阅下面的代码片段，它可能对您有所帮助。

SELECT COUNT(r) FROM Render r  WHERE r.scene.id = :sceneId AND r.status = :status

$(document).ready(function() {
  $('li.current-menu-item').click(function() {
    $(this).addClass('closed-menu-item');
    alert("added in " + $(this).html());
  });
});

Answer 3

是否可以将您的列表项稍后加载到DOM中？在这种情况下，您可以使用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);

另外，确保正确加载jQuery，这就是我使用

的原因

function($) {
    ...
})(jQuery)

作为包装。

Answer 4

我试过你的代码：

<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>

脚本：

jQuery(document).ready(function($) {
    $('li.current-menu-item').click(function() { 
        $(this).addClass('closed-menu-item');
    });
});

效果很好，所以我认为你的代码中还有更多内容会破坏你的功能。

Answer 5

//
method=$('elemant');
$(Document).ready(function()
{
     method.bind("click", function ()
     {
            methodClick($(this))
        });
        function methodClick(t)
        {
           //your code
        }

)};

jquery on click函数不能与list-items一起使用

5 个答案: