Wordpress菜单的引导导航栏自动折叠问题

3phpmpom  于 2022-12-03  发布在  WordPress
关注(0)|答案(2)|浏览(312)

注意:示例网址来自一个非营利组织的发展网站,该组织帮助委内瑞拉的兔唇儿童。因此,那里会有一些人们不愿意看到的图片。
我用Twitter Bootstrap构建了这个网站,并让导航栏与wp_nav_menu一起工作,没有任何问题。
由于首页导航栏中有#锚点,点击后无法重新加载。因此导航栏不会折叠回关闭状态。(所以请查看折叠按钮,调整屏幕大小)。
我需要的是:http://jsfiddle.net/hajpoj/By6ym/4/
我已经在小提琴的例子中尝试了这些东西,它工作得天衣无缝,所以它必须在jQuery或其他东西中增加额外的类/ id。
我的jQuery不够好,无法找到或创建干净的解决方案。直到
“PHP:

<div class="navbar navbar-inverse">
<div class="navbar-inner">
    <div class="container">
        <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>
        <p class="brand hidden-desktop">Menu</p>
        <div class="nav-collapse collapse navbar-responsive-collapse ss-icon">
        <?php $sitenavigatie = array(
            'theme_location'  => 'header-menu-left-page',
            'menu_class'      => 'menu',
            'echo'            => true,
            'fallback_cb'     => 'wp_page_menu',
            'items_wrap'      => '<ul id="%1$s" class="nav %2$s">%3$s</ul>',
            'depth'           => 0,
            'walker'          => new TessWalkerMenu());
            wp_nav_menu( $sitenavigatie ); ?>
        </div> <!-- end .nav-collapse .collapse .navbar-responsive-collapse -->
    </div> <!-- end .container-fluid -->
</div> <!-- end .navbar-inner -->

fiddle中的jQuery:

$('.nav-collapse').click('li', function() {
  $('.nav-collapse').collapse('hide');
});

希望有人能帮忙。

mzillmmw

mzillmmw1#

更新fiddle,请参见链接
jsfiddle.net/By6ym/23/

qzwqbdag

qzwqbdag2#

尝试添加文档就绪或在窗口加载时。

$( document ).ready(function() {
  $('.nav-collapse').click('li', function() {
    $('.nav-collapse').collapse('hide');
  });

});

相关问题