我一直在尝试使用bootstrap 4创建自定义的wordpress模板。我已经安装了navwalker,并且除通过移动设备查看之外,其他所有功能都可以正常工作。出现折叠菜单时,您可以显示带有所有动态加载的li的ul,但是当您在汉堡包菜单外部或按钮本身上单击时,它拒绝关闭。我看到要隐藏的类被调用了,但它又还原为显示。
Header.php
<nav id="collapse" class="navbar navbar-expand-lg navbar-light customNav">
<!-- <a class="navbar-brand" href="#"><img class="img-fluid smallLogo
logo" src="http://localhost/wordpress/igh/wp-
content/uploads/2018/07/SmallLogo.png" alt="Logo" /></a>--> <span
class="gold">Template Test</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => '',
'container_class' => '',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav ml-auto',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker(),
) );
?>
</div>
</nav>
Functions.php
<?php
// Register Custom Navigation Walker
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
//Theme Support
function wpb_theme_setup(){
register_nav_menus(array(
'primary' => __('Primary Menu')
));
}
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
if ( ! function_exists( 'wpt_setup' ) ):
function wpt_setup() {
register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
} endif;
function wpt_register_js() {
wp_register_script('jquery.bootstrap.min',
get_template_directory_uri() . '/js/bootstrap411.js', 'jquery');
wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
wp_register_style( 'bootstrap.min', get_template_directory_uri() .
'/css/bootstrap411.css' );
wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );
add_action('after_setup_theme', 'wpb_theme_setup');