Продолжайте отображать childs в меню при нажатии

Question

Продолжайте отображать childs в меню при нажатии

Это мой первый вопрос на этом сайте. Я искал здесь много раз и нашел почти все ответы, которые мне были нужны.

Я работаю над сайтом WordPress, используя underscores.me ==> test.davidsfonds-zele.be

С левой стороны вы можете найти вертикальное меню, которое можно открыть, чтобы щелкнуть дочерние элементы.

Когда вы щелкаете и переходите на соответствующую страницу, дочерний элемент выделяется, но вы его не видите, потому что меню больше не открывается.

Есть ли способ открыть его?

Меню построено на панели администратора 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;
}

1

css wordpress menu submenu underscores

Источник

user4832975 25 апр '15 в 21:59

1 ответ

Другие вопросы по тегам css wordpress menu submenu underscores

user1024961 26 апр '15 в 03:46 2015-04-26 03:46 · Answer 1 · 2015-04-26 03:46

Я бы предложил вам использовать CSS-классы, доступные в навигационных меню WordPress. В вашем случае у вас может быть функция в JavaScript для создания элементов с .current-menu-parent или же .current-menu-ancestor на вашем аккордеоне меню открыто. Что-то вроде приведенного ниже кода, хотя я не проверял его (так как не могу):

$('#cssmenu li.has-sub.current-menu-parent').addClass('open').children('ul').slideDown();

Это должно сделать конкретное меню, если вы поместите его в документ готов.