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。 alert（“ click”）只是确保我的函数真正被调用的一种方法。我的代码有什么问题？当我单击它时，显示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();                    
   });
});

嵌套函数在HTML中调用时不会执行

1 个答案: