选择框菜单不加载页面

Question

我是我的Wordpress（与Buddypress）应用程序我使用一个响应主题。不过，如果屏幕宽度为< = 768px，我已将菜单更改为选择框下拉菜单。

你可以在下面看到我的想法，这是通过使用两个wp_nav_menu完成的，其中一个（在walker的帮助下）创建菜单作为选择下拉菜单（当然借助responsive.css ）。

但是，我在这里一个问题，我需要帮助：

的选择框menulooks正确的，但如果我在菜单没有什么改变选项实际情况（即页面没有改变）。怎么来的？

的header.php：

<div id="navigation" role="navigation"> 
    <?php 

    <?php 
     wp_nav_menu(array(
      'container' => false, 
      'menu_id' => 'nav', 
      'theme_location' => 'primary', 
      'fallback_cb' => 'bp_dtheme_main_nav') 
     ); 

     wp_nav_menu(array(
      'container' => false, 
      'menu_id' => 'nav', 
      'theme_location' => 'primary', // your theme location here 
      'walker'   => new Walker_Nav_Menu_Dropdown(), 
      'items_wrap'  => '<select>%3$s</select>', 
      'fallback_cb' => 'bp_dtheme_main_nav' 
     )); 


     class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{ 
      function start_lvl(&$output, $depth){ 
       $indent = str_repeat("\t", $depth); 
      } 

      function end_lvl(&$output, $depth){ 
       $indent = str_repeat("\t", $depth); 
      } 

      function start_el(&$output, $item, $depth, $args){ 
       $item->title = str_repeat("&nbsp;", $depth * 4).$item->title; 

       parent::start_el(&$output, $item, $depth, $args); 

       $output = str_replace('<li', '<option', $output); 
      } 

      function end_el(&$output, $item, $depth){ 
       $output .= "</option>\n"; 
      } 
     } ?> 
</div> 

编辑：我意识到，这呈现的选择选项不包含任何值，所以我不能抢重定向的期权价值。代码显然有些问题，但是什么？

Answer 1

如果我正确地阅读你的问题，那么缺少的部分是当选择菜单中的一个选项时，更改window.location的Javascript。

将以下内容添加到您的onload JS中;

$("#responsive-nav select").change(function() { 
    window.location = $(this).find("option:selected").val(); 
}); 

编辑

好了，我其实只是落实到我做我自己的主题这一点。我看你使用一招小马的回答这个问题 -

https://wordpress.stackexchange.com/questions/27497/how-to-use-wp-nav-menu-to-create-a-select-menu-dropdown

我不知道他们是如何得到这工作，因为没有导航使用（就像url值已经指出），所以我修改了如下的start_el方法;

function start_el(&$output, $item, $depth, $args){ 
    // add spacing to the title based on the depth 
    $item->title = str_repeat(" ", $depth * 4).$item->title; 

    parent::start_el(&$output, $item, $depth, $args); 

    $href = ! empty($item->url) ? ' value="' . esc_attr($item->url) .'"' : ''; 

    // no point redefining this method too, we just replace the li tag... 
    $output = str_replace('<li', '<option '.$href, $output); 

} 

我不停的JavaScript一样的上方，我裹在我的header.php我wp_nav_menus呼叫与ID responsive-nav形式;

<!-- RESPONSIVE NAVIGATION FLIP --> 
    <form id="responsive-nav" action="" method="post"> 
    <select> 
    <option value="">Navigation</option> 
     <?php 

     $menu = wp_nav_menu(array(
      'theme_location' => 'primary', 
      'walker'   => new Walker_Nav_Menu_Dropdown() 
     )); 

     ?> 
    </select> 
    </form> 
    <!-- /END RESPONSIVE NAV -->