javascript - 自动滚动页面+关闭侧边栏菜单项选择后+链接菜单项与部分ID(Wordpress - Jquery)

Question

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

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>

这是我的侧边栏:

Answer 1

你必须给你的部分特定的 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;
    });

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