web-dev-qa-db-ja.com

サブメニュー項目から現在のクラスを削除

私はドロップダウンメニュー（サブメニュー）でワードプレスのウェブサイトを構築しています。

enter image description here

これを実現するために、ここではwordpresswalkerクラスを使用しています。これは私が私のfunctions.phpで使っているコードです。

class CSS_Menu_Maker_Walker extends Walker {

  var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul>\n";
  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul>\n";
  }

  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $class_names = $value = ''; 
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    /* Add active class */
    if(in_array('current-menu-item', $classes)) {
      $classes[] = 'current';
      unset($classes['current-menu-item']);
    }

    /* Check for children */
    $children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
    if (!empty($children)) {
      $classes[] = 'has-children';
    }

    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '<li' . $id . $value . $class_names .'>';

    $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        ) .'"' : '';

    $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 .= '</a>';
    $item_output .= $args->after;

    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }

  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= "</li>\n";
  }
}

私が達成しようとしていることを実証するために、次のHTMLを見てください。

  <nav id="nav-wrap"> 

        <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
           <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>

        <div class="row">                       

                <ul id="nav" class="nav">
                    <li class="current"><a href="index.html">Home</a></li>
                    <li class="has-children"><a href="#">Dropdown</a>
                      <ul>
                         <li><a href="#">Submenu 01</a></li>
                         <li><a href="#">Submenu 02</a></li>
                         <li><a href="#">Submenu 03</a></li>
                      </ul>
                   </li>
                   <li><a href="demo.html">Demo</a></li>    
                   <li><a href="archives.html">Archives</a></li>
                    <li class="has-children"><a href="single.html">Blog</a>
                            <ul>
                         <li><a href="blog.html">Blog Entries</a></li>
                         <li><a href="single.html">Single Blog</a></li>                      
                      </ul>
                    </li>               
                    <li><a href="page.html">Page</a></li>
                </ul> <!-- end #nav -->              

        </div> 

       </nav> <!-- end #nav-wrap -->

説明：

  1. "nav-wrap"という名前のクラスを持つメインのnavタグがあります。
  2. "row"というクラスを持つ単純なdivタグの中だけ
  3. 単純な（ul li a)ここで、クラスのidタグとid "nav"
  4. "has-children"というクラスを持つdivで囲まれたドロップダウン
  5. ユーザーが任意のアイテムをクリックすると、 "current"というクラスが呼び出されます。
  6. ユーザーがサブ項目をクリックしても、クラス "current"は呼び出されません。では、このケースクラス "current"がその親に適用されます。たとえば、ここでユーザーが「ブログエントリ」をクリックすると、クラス「現在」がその親、つまり「ブログ」に適用されます。

enter image description here

しかし、私が実際に手に入れているのは、

<nav id="nav-wrap"> 

        <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
           <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>

                <div class="row"><ul id="nav" class="nav"><li id="menu-item-557" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home current"><a href="http://127.0.0.1/wordpress/">Home</a></li>
<li id="menu-item-558" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://127.0.0.1/wordpress/about-us/">About Us</a></li>
<li id="menu-item-559" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-children"><a href="http://127.0.0.1/wordpress/blog/">Blog</a>
<ul>
    <li id="menu-item-564" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://127.0.0.1/wordpress/blog/category/blogger/">Blogger</a></li>
    <li id="menu-item-565" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://127.0.0.1/wordpress/blog/category/html-css/">HTML-CSS</a></li>
    <li id="menu-item-566" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://127.0.0.1/wordpress/blog/category/psd/">PSD</a></li>
</ul>
</li>
<li id="menu-item-560" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://127.0.0.1/wordpress/contact-us/">Contact</a></li>
</ul></div> 

       </nav> <!-- end #nav-wrap -->

これは私のメニューをheader.phpに出力するために使っているコードです。

<nav id="nav-wrap"> 

        <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
           <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>

                <?php wp_nav_menu(array(
                      'menu' => 'Main Navigation', 
                      'menu_class'      => 'nav',
                      'menu_id'         => 'nav',
                      'container_class' => 'row', 
                      'walker' => new CSS_Menu_Maker_Walker()
                )); ?> 

       </nav> <!-- end #nav-wrap -->

enter image description here

しかし、問題は、必要のないサブアイテムをクリックしたときにも「現在の」クラスが適用されることです。それでは、サブメニュー項目内の「現在の」クラスを削除し、それをその親クラスに適用するにはどうすればいいですか。

これは私がwpで変換している テンプレート です。

menuswalker
1
Raunak Hajela

次のコードをjQueryとして使用してください。

jQuery('#nav li').removeClass('current');
jQuery('#nav>li.current-menu-item').addClass('current');
jQuery('.has-children li.current-menu-item').closest('.has-children').addClass('current');

Jsfiddle（現在のアイテムの赤い色）を参照してください。 "Single Blog"メニュー項目をクリックすると、あなたのhtml構造は次の例のようになり、jQueryはそこからアクティブなクラスを削除し、あなたが望んでいたのとまったく同じように親クラスを追加します。 https://jsfiddle.net/dom8188s/

1
webHasan

@raunakどうすればjQueryのjQuery(" ul li .menu-item").removeClass( "current" );を親のjQuery(".current-menu-parent").addClass( "current" );に追加することができますか

0
ucon89