スマホメニューのリンク内ページ遷移でメニューが自動で閉じない

前提・実現したいこと

WordPressでBootstrapを使っています。

スマホでハンバーガーを押して、ページ内遷移のメニューを押すと、移動はしますがハンバーガーのメニューがかぶさってしまいます。

クリックすると自動でメニューが閉じるようにしたいです。

該当のソースコード

bootstrap-wp.js

jQuery(
1
2    $( 'input.search-field' ).addClass( 'form-control' );
3
4    // here for each comment reply link of wordpress
5    $( '.comment-reply-link' ).addClass( 'btn btn-primary' );
6
7    // here for the submit button of the comment reply form
8    $( '#commentsubmit' ).addClass( 'btn btn-primary' );
9
10    // The WordPress Default Widgets
11    // Now we'll add some classes for the wordpress default widgets - let's go
12
13    // the search widget
14    $( 'input.search-field' ).addClass( 'form-control' );
15    $( 'input.search-submit' ).addClass( 'btn btn-default' );
16
17    $( '.widget_rss ul' ).addClass( 'media-list' );
18
19    $( '.widget_meta ul, .widget_recent_entries ul, .widget_archive ul, .widget_categories ul, .widget_nav_menu ul, .widget_pages ul' ).addClass( 'nav' );
20
21    $( '.widget_recent_comments ul#recentcomments' ).css( 'list-style', 'none').css( 'padding-left', '0' );
22    $( '.widget_recent_comments ul#recentcomments li' ).css( 'padding', '5px 15px');
23
24    $( 'table#wp-calendar' ).addClass( 'table table-striped');    
25} );

bootstrap-wp-navwalker.php

/**
 * Extended Walker class for use with the
 * Twitter Bootstrap toolkit Dropdown menus in Wordpress.
 * Edited to support n-levels submenu.
 * @author johnmegahan https://gist.github.com/1597994, Emanuele 'Tex' Tessore https://gist.github.com/3765640
 * @license CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
 */
class wp_bootstrap_navwalker extends Walker_Nav_Menu {
	function start_lvl( &$output, $depth = 0, $args = array()) {
		$indent = str_repeat( "\t", $depth );
		$submenu = ($depth > 0) ? ' sub-menu' : '';
		$output	   .= "\n$indent<ul class=\"dropdown-menu$submenu depth_$depth\">\n";
	}
	function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
		$li_attributes = '';
		$class_names = $value = '';
		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		
		// managing divider: add divider class to an element to get a divider before it.
		$divider_class_position = array_search('divider', $classes);
		if($divider_class_position !== false){
			$output .= "<li class=\"divider\"></li>\n";
			unset($classes[$divider_class_position]);
		}
		
		$classes[] = ($args->has_children) ? 'dropdown' : '';
		$classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
		$classes[] = 'menu-item-' . $item->ID;
		if($depth && $args->has_children){
			$classes[] = 'dropdown-submenu';
		}
		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
		$class_names = ' class="' . esc_attr( $class_names ) . '"';
		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
		$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
		$output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
		
		$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
		$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
		$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
		$attributes .= ($args->has_children) 	    ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= ($depth == 0 && $args->has_children) ? '</a>' : '</a>'; // <b class="caret"></b>
		$item_output .= $args->after;
		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
	
	function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
		//v($element);
		if ( !$element )
			return;
		$id_field = $this->db_fields['id'];
		//display this element
		if ( is_array( $args[0] ) )
			$args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
		else if ( is_object( $args[0] ) )
			$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
		$cb_args = array_merge( array(&$output, $element, $depth), $args);
		call_user_func_array(array(&$this, 'start_el'), $cb_args);
		$id = $element->$id_field;
		// descend only when the depth is right and there are childrens for this element
		if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {
			foreach( $children_elements[ $id ] as $child ){
				if ( !isset($newlevel) ) {
					$newlevel = true;
					//start the child delimiter
					$cb_args = array_merge( array(&$output, $depth), $args);
					call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
				}
				$this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
			}
			unset( $children_elements[ $id ] );
		}
		if ( isset($newlevel) && $newlevel ){
			//end the child delimiter
			$cb_args = array_merge( array(&$output, $depth), $args);
			call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
		}
		//end this element
		$cb_args = array_merge( array(&$output, $element, $depth), $args);
		call_user_func_array(array(&$this, 'end_el'), $cb_args);
	}
}

###この辺りに記載だと考えてますがいかがでしょうか？

$classes[] = ($args->has_children) ? 'dropdown' : '';
        $classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
        $classes[] = 'menu-item-' . $item->ID;
        if($depth && $args->has_children){
            $classes[] = 'dropdown-submenu';
        }
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';
        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
        $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';

        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
        $attributes .= ($args->has_children)         ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= ($depth == 0 && $args->has_children) ? '</a>' : '</a>'; // <b class="caret"></b>
        $item_output .= $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

試したこと

ここに問題に対して試したことを記載してください。

https://teratail.com/questions/128115
https://teratail.com/questions/106730

この辺りを参考にしましたがわかりませんでした。

補足情報

初心者ですので見ている場所も違うかもしれません。

よろしくお願いいたします。

m.ts10806

2019/02/26 03:54 編集

質問は編集できますので再投稿する必要はありません。 https://teratail.com/questions/176517 どちらかを削除依頼だしておいてください。また、コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/help#about-markdown

yu-smc

2019/02/26 04:10

"ページ内遷移のメニューを押す" この時の処理が書かれている場所を明記していただけると答えやすくなると思います。

ichigob

2019/02/26 05:15

マークダウンはどのようにしたらいいでしょうか？

ichigob

2019/02/26 07:42 編集

マークダウン使ってみました。

m.ts10806

2019/02/26 05:22

マークダウンのコードブロック部分である ```がコード内に入り込んでいるのでそこは除いていただけたらと。 ※要はコピー機能が使えてインデントも揃うわけですが、コピーしたときに実際のコード以外のものが入り込むと正しく再現確認ができないためです。

ichigob

2019/02/26 06:29

削除しました。

kei344

2019/02/28 08:48

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

この辺りにヒントがあるのではないでしょうか。
Bootstrap でリンククリック時にcollapseメニューを閉じる処理
 bootsrtapでスマホでページ内遷移するとトグルメニューが閉じない
Bootstrapのファイルは触らず、htmlファイルの一番下のbody閉じタグ</body>の手前に、以下をを追加してみてください。

<script>
$(document).ready(function () {
  $(".navbar-nav li a").click(function(event) {
    $(".navbar-collapse").collapse('hide');
  });
});
</script>

投稿2019/02/27 07:04