選擇框菜單不加載頁面

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 -->