Question

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

你可以看到我在下面这样做的想法，这是通过使用两个wp_nav_menu来完成的，一个（在助行器的帮助下）创建菜单作为选择下拉菜单（当然在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

如果我正确地阅读了您的问题，则缺少的部分是Javascript，当选择菜单中的某个选项时，它会更改window.location。

将以下内容添加到onload JS;

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

修改

好的，我实际上已经把它实现到了我自己做的主题中。我看到你在这个问题中使用了One Trick Pony的答案 -

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

我不确定他们是如何工作的，因为没有用作导航的url值（正如你所指出的那样），所以我修改了start_el方法，如下所示; < / p>
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与上面相同，我将我的wp_nav_menus调用包装在我的header.php中，其格式为responsive-nav;

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

选择框菜单不加载页面

1 个答案: