Html jQuery-单击事件仅触发一次

Html jQuery-单击事件仅触发一次,html,jquery,css,events,dom-events,Html,Jquery,Css,Events,Dom Events,我有一个点击功能,它只有在第一次激活时才会启动 基本上,我有一个Bootstrap4站点,当我打开任何下拉菜单时,我想在标题中添加一个类。当我点击“ul li”时,它会根据我的代码在控制台中记录“test”,但当我再次点击它关闭菜单时,它不会再输出控制台日志消息 $(document).on('click', '.navbar-nav li', function() { console.log('test'); $('.navbar-nav li').each(function(

我有一个点击功能,它只有在第一次激活时才会启动

基本上,我有一个Bootstrap4站点,当我打开任何下拉菜单时,我想在标题中添加一个类。当我点击“ul li”时,它会根据我的代码在控制台中记录“test”,但当我再次点击它关闭菜单时,它不会再输出控制台日志消息

$(document).on('click', '.navbar-nav li', function() {
    console.log('test');
    $('.navbar-nav li').each(function() {
        if ($(this).hasClass('show')) {
            // Add Class Code
        }
    });
});
这是我的HTML:

<ul id="menu-main-menu" class="navbar-nav"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-62" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-62 nav-item"><a title="Golf" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-62">Golf</a>
    <div class="dropdown_wrapper">
        <div class="container">
            <div class="row w-100">
                <div class="col-12 position-unset">
                    <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-62" role="menu">
                        <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-78" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-78 nav-item">
                            <a title="Golf Courses" href="#" class="dropdown-item">Golf Courses</a> 
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-72" class="box_button menu-item menu-item-type-custom menu-item-object-custom menu-item-72 nav-item">
    <a title="Course Update" href="#" class="nav-link">Course Update</a>
</li>

任何帮助都将不胜感激,谢谢

我想你想要这样的东西:

$('.navbar-nav').find('li').on('click', e => {
  console.log('test');
    
  if ($(e.currentTarget).hasClass('show')) {
    // Add Class Code
  }
})

尝试此操作。

请提供一个runnable来演示此问题。您可以单击问题编辑器中的
,并在页面中包含引导资源,使其在此处运行。不幸的是,这根本不起作用,实际上也不会记录测试。您能否提供一个代码笔,我们可以复制它@我刚刚编辑了代码。请现在试一试!这是日志“测试”,但不幸的是,它只触发了一次。如果您提供一个代码笔来记录您的代码以及您想要实现的目标,那会更好。如果它触发一次是因为您的javascript出现另一个错误。尝试隔离所有内容,您将看到每次单击所选元素时都会打印console.log