jquery點擊功能不能使用列表項

我有一個子菜單，有幾個項目。當我點擊一個列表項時，它應該添加一個類closed-menu。jquery點擊功能不能使用列表項

我使用了點擊功能，但是當我檢查時，我無法真正看到這個類。

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

出於測試目的，我用這個代碼來自動只是添加同一類和它的工作：

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

所以，我怎麼能添加的類別，只有當我點擊列表中的項目？

注：我正在開發使用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);

對新準則可能的功能之一是預防功能正在嘗試添加。

來源

2016-09-26 Wosley Alarico

提供複製您的問題的簡約示例。您的代碼應該按預期工作。也許別的東西（綁定在任何祖先上的其他點擊處理程序）會刪除該類，或者在DOM準備就緒後添加這些LI元素。 –

如果你的項目動態添加使用事件代表團&不要忘記阻止默認點擊

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

來源

2016-09-26 08:10:39 madalinivascu

請參見下面的代碼片段，它可以幫助你。

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

來源

2016-09-26 08:11:24

難道讓你列表項以後加載到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)

的包裝。

來源

2016-09-26 08:12:24 Joachim

我曾嘗試你的代碼：

<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'); 
    }); 
});

它工作得很好，所以我覺得有是打破你functionnalities更多的東西在你的代碼。

來源

2016-09-26 08:14:51 Latsuj

這是一個WordPress網站，所以也許其中一個腳本阻止了這一點。將複查。 –

@WosleyAlarico所以在WP上，加載窗口後會刪除'$'引用。這個答案，通過'$'作爲jQuery ref（'.ready（function（$）'）將會解決它，但是你的控制檯中有一個錯誤信息，你沒有告訴我們這個問題...... –

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

)};

來源

2016-09-26 08:27:48

jquery點擊功能不能使用列表項

回答

相關問題