无法在 Wordpress 中折叠响应式菜单

Question

我是网站开发的新手，所以我正在使用一些响应式菜单进行测试，看看它在 Wordpress 中是如何工作的。我选择了这个菜单，它在演示中完美运行。然而，当我将代码应用到我的网站时，菜单栏无法折叠。 class="navbar-collapse collapse show" 此类中的show 无法正确移除。 [您可以在检查页面时看到它：https://gttutor.com/test/ 请问我应该如何修复它？谢谢！

<div class="navbar-collapse collapse show" id="navbarSupportedContent" style="padding-right: 0px;">
            <ul class="navbar-nav ml-auto">
                
        </div>

<nav class="navbar navbar-expand-lg navbar-mainbg" style="
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-top: 0px;">
        <a class="navbar-brand navbar-logo" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <i class="fas fa-bars text-white"></i>
        </button>
        <div class="navbar-collapse collapse" id="navbarSupportedContent" style="padding-right: 0px;">
            <ul class="navbar-nav ml-auto">
                <div class="hori-selector"><div class="left"></div><div class="right"></div></div>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="fas fa-tachometer-alt"></i>Dashboard</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-address-book"></i>Address Book</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-clone"></i>Components</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-calendar-alt"></i>Calendar</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-chart-bar"></i>Charts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);"><i class="far fa-copy"></i>Documents</a>
                </li>
            </ul>
        </div>
    </nav>

    <script>
          // ---------Responsive-navbar-active-animation-----------
        function test(){
          var tabsNewAnim = $('#navbarSupportedContent');
          var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
          var activeItemNewAnim = tabsNewAnim.find('.active');
          var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
          var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
          var itemPosNewAnimTop = activeItemNewAnim.position();
          var itemPosNewAnimLeft = activeItemNewAnim.position();
          $(".hori-selector").css({
            "top":itemPosNewAnimTop.top + "px", 
            "left":itemPosNewAnimLeft.left + "px",
            "height": activeWidthNewAnimHeight + "px",
            "width": activeWidthNewAnimWidth + "px"
          });
          
          $("#navbarSupportedContent").on("click","li",function(e){
            $('#navbarSupportedContent ul li').removeClass("active");
            $(this).addClass('active');
            var activeWidthNewAnimHeight = $(this).innerHeight();
            var activeWidthNewAnimWidth = $(this).innerWidth();
            var itemPosNewAnimTop = $(this).position();
            var itemPosNewAnimLeft = $(this).position();
            $(".hori-selector").css({
              "top":itemPosNewAnimTop.top + "px", 
              "left":itemPosNewAnimLeft.left + "px",
              "height": activeWidthNewAnimHeight + "px",
              "width": activeWidthNewAnimWidth + "px"
            });
          });
        }
        $(document).ready(function(){
          setTimeout(function(){ test(); });
        });
        $(window).on('resize', function(){
          setTimeout(function(){ test(); }, 500);
        });
        $(".navbar-toggler").click(function(){
          setTimeout(function(){ test(); });
        });
    </script>

等级方法：

( function test( $ ){
          var tabsNewAnim = $('#navbarSupportedContent');
          var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
          var activeItemNewAnim = tabsNewAnim.find('.active');
          var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
          var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
          var itemPosNewAnimTop = activeItemNewAnim.position();
          var itemPosNewAnimLeft = activeItemNewAnim.position();
          $(".hori-selector").css({
            "top":itemPosNewAnimTop.top + "px", 
            "left":itemPosNewAnimLeft.left + "px",
            "height": activeWidthNewAnimHeight + "px",
            "width": activeWidthNewAnimWidth + "px"
          });
          
          $("#navbarSupportedContent").on("click","li",function(e){
            $('#navbarSupportedContent ul li').removeClass("active");
            $(this).addClass('active');
            var activeWidthNewAnimHeight = $(this).innerHeight();
            var activeWidthNewAnimWidth = $(this).innerWidth();
            var itemPosNewAnimTop = $(this).position();
            var itemPosNewAnimLeft = $(this).position();
            $(".hori-selector").css({
              "top":itemPosNewAnimTop.top + "px", 
              "left":itemPosNewAnimLeft.left + "px",
              "height": activeWidthNewAnimHeight + "px",
              "width": activeWidthNewAnimWidth + "px"
            });
          });
        }
        $(document).ready(function(){
          setTimeout(function(){ test(); });
        });
        $(window).on('resize', function(){
          setTimeout(function(){ test(); }, 500);
        });
        $(".navbar-toggler").click(function(){
          setTimeout(function(){ test(); });
        }(jQuery));

Answer 1

您的navbar-toggler 按钮没有任何切换类代码。相反，定义了一个空的 setTimeout()。试着像这样改变它。

$('.navbar-toggler').on('click', function(e) {
      $('#navbarSupportedContent').toggleClass("show");
      e.preventDefault();
    });

Answer 2

@Ozgur Sar 已经给出了正确答案，但可能有原因导致它不起作用：

Console 中很可能出现错误“$ is not a function”。虽然 Wordpress 本身有 jQuery，但有时必须将函数包装如下才能工作：

( function( $ ) {
    /* your code ... */
}( jQuery ) );

所以你的代码看起来像：

( function( $ ) {
      var tabsNewAnim = $('#navbarSupportedContent');
      var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
      var activeItemNewAnim = tabsNewAnim.find('.active');
      var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
      var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
      var itemPosNewAnimTop = activeItemNewAnim.position();
      var itemPosNewAnimLeft = activeItemNewAnim.position();
      $(".hori-selector").css({
        "top":itemPosNewAnimTop.top + "px", 
        "left":itemPosNewAnimLeft.left + "px",
        "height": activeWidthNewAnimHeight + "px",
        "width": activeWidthNewAnimWidth + "px"
      });
      
      $("#navbarSupportedContent").on("click","li",function(e){
        $('#navbarSupportedContent ul li').removeClass("active");
        $(this).addClass('active');
        var activeWidthNewAnimHeight = $(this).innerHeight();
        var activeWidthNewAnimWidth = $(this).innerWidth();
        var itemPosNewAnimTop = $(this).position();
        var itemPosNewAnimLeft = $(this).position();
        $(".hori-selector").css({
          "top":itemPosNewAnimTop.top + "px", 
          "left":itemPosNewAnimLeft.left + "px",
          "height": activeWidthNewAnimHeight + "px",
          "width": activeWidthNewAnimWidth + "px"
        });
      });
      
      $('.navbar-toggler').on('click', function(e) {
          $('#navbarSupportedContent').toggleClass("show");
          e.preventDefault();
      });
}( jQuery ) );

这应该可行。

我没有使用超时功能。如果您想进行平滑过渡，请尝试使用 CSS 过渡属性使其看起来不错。

---

关于向 wordpress 添加 javascript

更可靠的方法是将它放在一个单独的文件中（可能是主题文件夹内的js 文件夹）并使用 jQuery 的依赖项将其排入队列（因为如果 jquery 是，代码将不起作用未正确加载）。这可以在您主题的functions.php 中：

function gttutor_scripts() {

    wp_enqueue_script( 'script', get_template_directory_uri() . '/js/gt-tutor.js', array ( 'jquery' ), 1.1, true);

}
add_action( 'wp_enqueue_scripts', 'gttutor_scripts' );