自动滚动页面 + 在菜单项选择后关闭侧边栏 + 带有部分 ID 的链接菜单项（Wordpress - Jquery）

debugcn 发表于 Dev

MA-2016

我正在尝试创建一个自定义侧边栏菜单......我有一个页面站点，上面有一个部分......每个侧边栏菜单链接都应该连接到一个特定的部分。我已经创建了菜单，但有两个问题：

1）我想在 jquery 的帮助下将菜单项与部分 ID 链接起来。2) 当用户点击侧边栏中的菜单项时，它应该自动关闭并将页面滚动到该部分。

我是 Jquery 和 wordpress 的新手..请帮我解决这个问题。

侧边栏 Html：

<ul id="primary-menu" class="main-nav" role="menu">
    <li class="menu-item menu-item-type-custom menu-item-object-custom">
        <a href="#quote" data-level="1">
            <span class="menu-item-text">
                <span class="menu-text">Instant Quote</span>
                <i class="underline"></i>
            </span>
        </a>
    </li> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom">
        <a href="#ethos" data-level="1">
            <span class="menu-item-text">
                <span class="menu-text">Ethos</span>
                <i class="underline"></i>
            </span>
        </a>
    </li>             
</ul>

这是我的侧边栏：

塔索斯邪能

你必须给你的部分特定的 id 像 <section id="quote">

然后在你的 main.js 中写一些东西

$('.menu-item').find('a').click(function(){
        var $href = $(this).attr('href');
        var $anchor = $($href).offset();
        $('body, html').animate({ scrollTop: $anchor.top} ,1500);
        return false;
    });

关闭侧边栏这取决于你如何制作这个侧边栏。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。