1. 首页
  2. 问答
  3. WordPress的手风琴菜单不会扩大点击

WordPress的手风琴菜单不会扩大点击

2016-04-27 193 views
0

我只是试图按照本指南在Wordpress中实施手风琴菜单。WordPress的手风琴菜单不会扩大点击

http://cssmenumaker.com/blog/wordpress-accordion-menu-tutorial

我的测试网站在这里：http://testsite2.seyoum.net/

如果我照做，因为它说的引导，WP能够打印出菜单，我可以看到的是，CSS样式被应用。问题在于li群组在点击时不会展开（这是这里的要点）。我不确定是否这是因为.js不工作或者是否有其他内容。

我以为也许我从之前有冲突的CSS，所以我用_s做了一个新的wordpress主题，删除了所有CSS样式（以便只有来自手风琴菜单的CSS）被应用，但我仍然遇到了同样的问题。菜单在那里。它不会在点击时展开。

那么是什么原因造成的呢？

的script.js：

(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);

渲染HTML：

<div id="cssmenu" class="menu-accordion-menu-test-container"><ul id="menu-accordion-menu-test" class="menu"><li id="menu-item-1741" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub"><a href="#"><span>Group 1</span></a> 
    <ul> 
     <li id="menu-item-1743" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub"><a href="#"><span>Sub Group 1</span></a> 
      <ul> 
       <li id="menu-item-1746" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
       <li id="menu-item-1747" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
       <li id="menu-item-1748" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
      </ul> 
     </li> 
     <li id="menu-item-1744" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub"><a href="#"><span>Sub Group 2</span></a> 
      <ul> 
       <li id="menu-item-1751" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub"><a href="#"><span>Sub Group Level 3</span></a> 
        <ul> 
         <li id="menu-item-1749" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
         <li id="menu-item-1750" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
        </ul> 
       </li> 
       <li id="menu-item-1752" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
      </ul> 
     </li> 
     <li id="menu-item-1753" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
     <li id="menu-item-1754" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
    </ul> 
</li> 
<li id="menu-item-1755" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub"><a href="#"><span>Group 2</span></a> 
    <ul> 
     <li id="menu-item-1756" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
     <li id="menu-item-1757" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
    </ul> 
</li> 
<li id="menu-item-1758" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub"><a href="#"><span>Group 3</span></a> 
    <ul> 
     <li id="menu-item-1759" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
     <li id="menu-item-1760" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
    </ul> 
</li> 
<li id="menu-item-1761" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub"><a href="#"><span>Group 4</span></a> 
    <ul> 
     <li id="menu-item-1762" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children has-sub"><a href="#"><span>Sub Group 3</span></a> 
      <ul> 
       <li id="menu-item-1763" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
       <li id="menu-item-1764" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
      </ul> 
     </li> 
     <li id="menu-item-1765" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
     <li id="menu-item-1766" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="#"><span>Image</span></a></li> 
    </ul> 
</li> 
</ul></div>

CSS：

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    line-height: 1; 
    display: block; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#cssmenu { 
    width: 200px; 
    font-family: Helvetica, Arial, sans-serif; 
    color: #ffffff; 
} 
#cssmenu ul ul { 
    display: none; 
} 
.align-right { 
    float: right; 
} 
#cssmenu > ul > li > a { 
    padding: 15px 20px; 
    border-left: 1px solid #1682ba; 
    border-right: 1px solid #1682ba; 
    border-top: 1px solid #1682ba; 
    cursor: pointer; 
    z-index: 2; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
    color: #ffffff; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); 
    background: #36aae7; 
    background: -webkit-linear-gradient(#36aae7, #1fa0e4); 
    background: -moz-linear-gradient(#36aae7, #1fa0e4); 
    background: -o-linear-gradient(#36aae7, #1fa0e4); 
    background: -ms-linear-gradient(#36aae7, #1fa0e4); 
    background: linear-gradient(#36aae7, #1fa0e4); 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); 
} 
#cssmenu > ul > li > a:hover, 
#cssmenu > ul > li.active > a, 
#cssmenu > ul > li.open > a { 
    color: #eeeeee; 
    background: #1fa0e4; 
    background: -webkit-linear-gradient(#1fa0e4, #1992d1); 
    background: -moz-linear-gradient(#1fa0e4, #1992d1); 
    background: -o-linear-gradient(#1fa0e4, #1992d1); 
    background: -ms-linear-gradient(#1fa0e4, #1992d1); 
    background: linear-gradient(#1fa0e4, #1992d1); 
} 
#cssmenu > ul > li.open > a { 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15); 
    border-bottom: 1px solid #1682ba; 
} 
#cssmenu > ul > li:last-child > a, 
#cssmenu > ul > li.last > a { 
    border-bottom: 1px solid #1682ba; 
} 
.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; 
} 
#cssmenu ul ul li a { 
    cursor: pointer; 
    border-bottom: 1px solid #32373e; 
    border-left: 1px solid #32373e; 
    border-right: 1px solid #32373e; 
    padding: 10px 20px; 
    z-index: 1; 
    text-decoration: none; 
    font-size: 13px; 
    color: #eeeeee; 
    background: #49505a; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
} 
#cssmenu ul ul li:hover > a, 
#cssmenu ul ul li.open > a, 
#cssmenu ul ul li.active > a { 
    background: #424852; 
    color: #ffffff; 
} 
#cssmenu ul ul li:first-child > a { 
    box-shadow: none; 
} 
#cssmenu ul ul ul li:first-child > a { 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
} 
#cssmenu ul ul ul li a { 
    padding-left: 30px; 
} 
#cssmenu > ul > li > ul > li:last-child > a, 
#cssmenu > ul > li > ul > li.last > a { 
    border-bottom: 0; 
} 
#cssmenu > ul > li > ul > li.open:last-child > a, 
#cssmenu > ul > li > ul > li.last.open > a { 
    border-bottom: 1px solid #32373e; 
} 
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a { 
    border-bottom: 0; 
} 
#cssmenu ul ul li.has-sub > a::after { 
    display: block; 
    position: absolute; 
    content: ""; 
    width: 5px; 
    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; 
}

从header.php中

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

从functions.php中：

add_action('wp_enqueue_scripts', 'cssmenumaker_scripts_styles'); 
function cssmenumaker_scripts_styles() { 
    wp_enqueue_style('cssmenu-styles', get_template_directory_uri() . '/cssmenu/styles.css'); 
    wp_enqueue_script('cssmenu-scripts', get_template_directory_uri() . '/cssmenu/script.js'); 
} 

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"; 
    } 
}

来源

2016-04-27 Arete

+0

提供链接或ma ke一个js小提琴/ codepen与输出的头部html，相关的css（php代码不是有用的）和js。可能是导致它的任何东西......但你应该首先看看控制台的js错误。 – David

+0

jquery未定义，谷歌如何将它排入wp并添加脚本作为依赖。 – David

+0

这是正确的吗？ 'function load_js（）{ \t wp_register_script（'script'，get_template_directory_uri（）。'/cssmenu/script.js'，array（'jquery'））; \t wp_enque_script（'script'）; }' – Arete

回答

0

我发现了一个非常有益的和详细的指南在这里：https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

解决办法很简单：

// Add styles to the cssmenu 
add_action('wp_enqueue_scripts', 'cssmenumaker_scripts_styles'); 
function cssmenumaker_scripts_styles() { 
    wp_enqueue_style('cssmenu-styles', get_template_directory_uri() . '/cssmenu/styles.css'); 
} 

// Add script to the css menu 
function css_menu_script() { 
    wp_enqueue_script('css_menu_script', get_template_directory_uri() . '/cssmenu/script.js', array('jquery'), '1.0.0', true); 
} 
add_action('wp_enqueue_scripts', 'css_menu_script');

来源

2016-04-28 21:05:03 Arete

相关问题

 相关问题