jasny侧边栏汉堡单击在wordpress中不起作用

Question

我正在实现jasny offcanvas example以构建wordpress主题。 wordpress似乎可以构建页面，但是当它以移动视图观看时，hamburger单击将无法工作。此外，侧边栏中的下拉菜单也不起作用。

检查元素显示的我的浏览器网络选项卡显示，Wordpress加载了bootstrap.min.css，bootstrap.min.js，jquery-3.3.1.min.js和popper.js，也加载了我的样式表。我浏览了许多网站，似乎找不到我要找的东西。由于我是Wordpress主题构建的新手，因此我可以找出页面存在问题的地方。预先感谢。

page.php

<?php get_header(); ?>
<?php get_sidebar(); ?>
<header class="navbar navbar-light bg-light fixed-top hidden-md hidden-lg">
      <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target=".navmenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </header>

    <div class="container">
      <div class="page-header">
        <h1>Off Canvas Slide-in Menu Template</h1>
      </div>
      <p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
      <p>Also take a look at the examples for a navmenu with <a href="../navmenu-push">push effect</a> and <a href="../navmenu-reveal">reveal effect</a>.</p>
    </div><!-- /.container -->

<?php get_footer(); ?>

sidebar.php

<div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
      <ul class="nav navmenu-nav flex-column">
        <li class="nav-item active"><a class="nav-link" href="../navmenu/">Slide in</a></li>
        <li class="nav-item"><a class="nav-link" href="../navmenu-push/">Push</a></li>
        <li class="nav-item"><a class="nav-link" href="../navmenu-reveal/">Reveal</a></li>
        <li class="nav-item"><a class="nav-link" href="../navbar-offcanvas/">Off canvas navbar</a></li>
      </ul>
      <ul class="nav navmenu-nav flex-column">
      <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu navmenu-nav">
            <li class="nav-item"><a class="nav-link" href="#">Action</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
            <li class="dropdown-divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
            <li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>

footer.php

<?php wp_footer(); ?>
</body>
</html>

Answer 1

阅读此答案-link。您要做的是-在jQuery文件中的bootstrap.js之前加载functions.php。

<?php
function your_script_enqueue() {
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'custom_style', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all');
    wp_enqueue_style( 'jasny_css', get_template_directory_uri() . '/css/jasny-bootstrap.min.css' );

    wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-3.3.1.min.js' );
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js' );
    wp_enqueue_script( 'jasny_js', get_template_directory_uri() . '/js/jasny-bootstrap.min.js' );
    wp_enqueue_script( 'popper', get_template_directory_uri() . '/js/popper.js' );
}

add_action( 'wp_enqueue_scripts', 'your_script_enqueue' );
?>

那你就可以了。