Вложенная функция не будет выполняться при вызове ее в HTML

Question

Я хотел бы создать панель навигации, которая будет падать, когда размер экрана ниже определенного размера, используя jQuery, HTML и CSS, веб-сайт использует Wordpress, поэтому

jQuery(function($) {...

Вот мой код:

<div class="navbar-nav" id="nav-responsive">                    
    <a class="nav-item nav-link" href="#">Créer mon plateau de fromages |</a>           
    <a class="nav-item nav-link" href="<?php echo get_site_url(); ?>/l-histoire-lepetit">L'histoire Lepetit |</a>
    <a class="nav-item nav-link" href="<?php echo get_site_url(); ?>/le-camembert-lepetit">Le camembert Lepetit |</a>
    <a class="nav-item nav-link" href="<?php echo get_site_url(); ?>/univers">L'univers Lepetit |</a>
    <a class="nav-item nav-link" href="<?php echo get_site_url(); ?>/conseil">Les conseils Lepetit</a>
</div>
<a href="javascript:void(0)" class="bar-nav-container" onclick="showNav()">
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/menu-bar.png" id="bar-nav">
</a>

<script>
    jQuery(function ($) {
        function showNav() {
            // var navBlock = $('nav-responsive')
            $('#bar-nav-container').click(function () { 
                alert("click");                     
            });
        }

        showNav();
    });
</script>

Я хочу, чтобы bar-nav-container выполнял showNav при нажатии на него.Предупреждение («щелчок») - это просто способ убедиться, что моя функция действительно вызвана.Что не так с моим кодом?Когда я нажимаю, он говорит, что showNav не определен .. Я попытался вызвать функцию с помощью:

onclick="$(showNav())"

И все равно она не работает.Любая помощь, пожалуйста?Спасибо!

Answer 1

"bar-nav-container" - это ваш класс, и функция должна быть снаружи.Ваш сценарий должен быть примерно таким.

function showNav(){
                  //do whatever you want
}
$(document).ready(function(){
   $('.bar-nav-container').click(function () { 
        alert("click"); showNav();                    
   });
});