Why drop-down menu does not display on click in WordPress?

Question

I want to make the sub-menus visible on click. I am using the default WP navigation.

In order to check which elements I need, I checked the source code and then used the corresponded classes in my code. First, the drop-downs are displayed when you hover and then they go up. Which probably means that the second part of the script works. What am I doing wrong?

 $(document).ready(function(){ // Show hide popover $(".menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-623 first-child a").click(function(){ $(this).find(".sub-menu ").slideToggle("fast"); }); }); $(document).on("click", function(event){ var $trigger = $(".menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-623 first-child"); if($trigger !== event.target && !$trigger.has(event.target).length){ $(".sub-menu").slideUp("fast"); } }); 

 <ul id="primary-menu" class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu- item-623 first-child"> <a href="#">Explore</a> <ul class="sub-menu"> <li id="menu-item-563" class="menu-item menu-item-type-post_type menu- item-object-page current-menu-item page_item page-item-14 current_page_item menu-item-563 first-child"><a href="http://localhost:81/DEMO/why-develop-for-hue/">Why </a></li> <li id="menu-item-562" class="menu-item menu-item-type-post_type menu- item-object-page menu-item-562 last-child"><a href="http://localhost:81/DEMO/who-already-joined/">Who </a> </li> </ul> </ul> 

Answer 1

This issue can be fixed with navwalker. Feel free to checkout: https://github.com/wp-bootstrap/wp-bootstrap-navwalker you can explore further on your own Good Luck!!!