0

我一直致力于使用 bootstrap 为 wordpress 网站制作一个响应速度更快的主题。我将主导航设置为展开子项onhover而不是单击事件。这是我用来完成此任务的插件。这在移动设备和台式机上都非常有效。我理解并阅读了开发人员将其设计为需要点击事件的理由，但我希望保留悬停功能。

我剩下的一个问题是顶级导航也是一个页面，在移动设备上不可点击。在移动设备上，当您单击顶级导航时，它会正确展开和折叠，但我无法单击顶部项目。所以我想做的是，如果屏幕分辨率足够小，可以作为平板电脑或智能手机使用，也可以将最上面的项目也包括在内，这样它就可以点击了。

因此，如果您的示例导航项在桌面上是这样的

CLASSES
- HISTORY
- MATH

在平板电脑/手机等较小的分辨率上，它看起来像：

CLASSES
- CLASSES
- HISTORY
- MATH

我怎么能做到这一点，或者最好的选择是什么？这是我的导航当前在 Wordpress 中的样子：

<div class="navbar navbar-inverse">
<div class="navbar-inner">
    <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <a class="brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
        <div class="nav-collapse">
            <ul class="nav">
                <?php
                if ( function_exists('wp_nav_menu') ) {
                    wp_nav_menu( array(
                            'menu'       => 'top_menu',
                            'depth'      => 2,
                            'container'  => false,
                            'menu_class' => 'nav',
                            'fallback_cb' => 'wp_page_menu',
                            //Process nav menu using our custom nav walker
                            'walker' => new twitter_bootstrap_nav_walker())
                    );
                }
                ?>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>
</div>

twitter_bootstrap_nav_walker扩展了 Wordpress 的Walker_Nav_Menu类。它为从引导程序所需的数据库加载的页面添加了适当的属性。

这是带有子项的导航项上的 HTML 的样子。这data-hover="dropdown"就是使树在鼠标悬停时自动展开的原因。

<a href="http://localhost/classes" data-toggle="dropdown" data-hover="dropdown" data-target="#" class="dropdown-toggle js-activated">CLASSES <span class="caret"></span></a>
4

1 回答 1

1

由于您使用的是引导程序，因此一个快速而肮脏的解决方案可能是简单地使用响应实用程序类。您可以将“CLASSES”菜单项设置为具有.visible-phone和.visible-tablet类

于 2013-05-30T18:02:19.913 回答