css - クリック時にメニューに子を表示し続ける

Question

これは、このサイトでの最初の質問です。ここで何度も検索して、必要な答えをほぼすべて見つけました。

underscores.me ==> test.davidsfonds-zele.be を使用して wordpress サイトに取り組んでいます

左側には、子アイテムをクリックするために開くことができる垂直メニューがあります。

クリックして関連するページに移動すると、子項目が強調表示されますが、メニューが開かれていないため表示されません。

開ける方法はありますか？

他の管理者 (Web 知識なし) もメニューを変更できるため、メニューは Wordpress の管理パネルに組み込まれています。

私は多くのことを試しましたが、すべて成功しませんでした。それを行うための完全な他の方法がある場合は、お気軽に私を学んでください. 私が使用したこのコードは長すぎると思います...次の方法を使用して、現在持っているものを取得しました。

サイトチュートリアル: http://cssmenumaker.com/blog/wordpress-accordion-menu-tutorial

関数

                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[] = 'active';
                              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-sub';
                            }

                            $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 .'><span>';
                            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
                            $item_output .= '</span></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";
                          }
                }

menu.php

    <?php
wp_nav_menu(array(
  'menu' => 'Linkermenu',   // This will be different for you.
  'container_id' => 'cssmenu',
  'walker' => new CSS_Menu_Maker_Walker()
));
?>

Javascript:

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
    
            
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp();
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown();
                        element.siblings('li').children('ul').slideUp();
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp();
		}
	});

	$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

	(function getColor() {
		var r, g, b;
		var textColor = $('#cssmenu').css('color');
		textColor = textColor.slice(4);
		r = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		g = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		b = textColor.slice(0, textColor.indexOf(')'));
		var l = rgbToHsl(r, g, b);
		if (l > 0.7) {
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
		}
		else
		{
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
		}
	})();

	function rgbToHsl(r, g, b) {
	    r /= 255, g /= 255, b /= 255;
	    var max = Math.max(r, g, b), min = Math.min(r, g, b);
	    var h, s, l = (max + min) / 2;

	    if(max == min){
	        h = s = 0;
	    }
	    else {
	        var d = max - min;
	        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	        switch(max){
	            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	            case g: h = (b - r) / d + 2; break;
	            case b: h = (r - g) / d + 4; break;
	        }
	        h /= 6;
	    }
	    return l;
	}
});

} )( jQuery );

.css ファイル:

#cssmenu,
#cssmenu ul,
#cssmenu ul li{
  position: relative;
  margin: 0;
  width: 100%;
  list-style: none;
  line-height: 1;
  display: block;
}

#cssmenu {
  width: 100%;
  float: left;
  font-size: 1em;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
}

#cssmenu ul li {
  font-weight: bold;
  background: #fff;
  padding: 5%;
 }
 
 #cssmenu ul li a {
  position: relative;
  color: #4d4d4d;
  left: -10%;
  margin: 0;
  width: 100%;
  list-style: none;
  line-height: 1;
  display: block;
  cursor: pointer;
  z-index: 2;
  padding: 15px 7px;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

#cssmenu > ul > li > a:hover{
   background: #407194;
   color: #fff; 
   text-decoration: none;

}

#cssmenu > ul > li.open > a{
   background: #407194;
   color: #fff; 
   text-decoration: none;
  display: block;
  position: relative;
    
}
#cssmenu > ul > li.active > a {
  display: block;
  position: relative;
}

#cssmenu ul ul li a {
  position: relative;
  left: -30%;
  margin: 0;
  width: 150%;
  list-style: none;
  line-height: 1;
  display: block;
  cursor: pointer;
  color: #ed6d16;
  z-index: 2;
  padding: 10%;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

#cssmenu ul ul li:hover > a{
   background: #f68615;
   color: #fff; 
   text-decoration: none;
 
}

#cssmenu ul ul li.open > a{
   background: #407194;
   color: #fff; 
   text-decoration: none;
   display: block;
    position: relative;
}
#cssmenu ul ul li.active > a {
  display: block;
  position: relative;
}

#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 500px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;
  
}

#cssmenu ul li li.current-menu-item.current_page_item a {
   background: #407194;
   color: #fff;  
   text-decoration: none;
   display: block;
}

#cssmenu ul ul {
  display: none;
}

.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #eeeeee;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}

css - クリック時にメニューに子を表示し続ける

1 に答える 1

Related

Reference