1

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

您可以在下面看到我这样做的想法，这是通过使用两个 wp_nav_menu 来完成的，其中一个（在步行者的帮助下）将菜单创建为选择下拉菜单（当然在 responsive.css 的帮助下）。

但是，我在这里遇到问题需要帮助：

选择框菜单看起来是正确的，但如果我更改菜单中的选项，实际上什么也没有发生（即页面没有改变）。怎么来的？

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>

编辑：我已经意识到呈现的选择选项不包含任何值，所以我无法获取重定向的选项值。代码显然有问题，但是什么？

4

1 回答 1

2

如果我正确地阅读了您的问题，那么缺少的部分是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如下方法；

function start_el(&$output, $item, $depth, $args){
  // add spacing to the title based on the depth
  $item->title = str_repeat("&nbsp;", $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 调用以带有 id 的形式包装在 header.php 中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 -->
于 2013-03-03T11:18:58.937 回答