导航子菜单一页网站

Question

我并不真正了解所有这些编码术语，因此我很难找到问题的答案。通常我只是复制粘贴现有代码并尝试对我想要的内容进行一些调整。无论如何，我正在研究单页网站上的导航菜单。所以到现在为止，这行得通。但是，我想要一个子菜单。我尝试了一些东西，但我无法真正得到我想要的。我想要的是当我点击一个菜单项时，子菜单打开并激活第一个子菜单项。

我找到了一个例子：http://inthe7heaven.com/fb-john-doe/dark/

照片部分。我试图复制它，但我认为子菜单与相册的过滤功能有关。

任何人都可以在这方面给我一些指导吗？

HTML

 <nav class="on_caption">
    <ul class="pagination">
        <li class="home current"><a href="#0">Home</a></li>
        <li class=""><a href="#1">About EJ</a></li>
        <li class=""><a href="#2">Services</a></li>
        <li class="photos">
            <a href="#3">Photos</a>
        <div id="filter" class="category_filter_list">
            <span class="active_link" id="all">All</span>
            <span id="cookies">Cookies</span>
            <span id="bread">Bread</span>
            <span id="baking">Baking</span>
        </div>
        </li>
        <li class=""><a href="#4">Classes</a></li>
        <!--<li class=""><a href="#5">Testimonials</a></li>-->
        <li class=""><a href="#6">Contact</a></li>
    </ul>
</nav>

CSS

    nav {   
       position: absolute;
       z-index: 999;
       right: 0;
       top: 0;
       width: 158px;
       height: 600px;
       display: block;
       overflow: hidden;
       behavior: url(js/PIE.htc);
    }

    nav.on_caption {
       background: rgba(20,11,19,.6);
       -pie-background: rgba(20,11,19,.6);
    }

nav.on_caption a {
       color: #d0ced0;
    }

    nav.off_caption {
       background: rgba(20,11,19,.08);
       -pie-background: rgba(20,11,19,.08);
    }

    nav.off_caption a {
       color: #524b51;
    }

    nav a {
       font-size: 1.143em;
       text-transform: uppercase;
    }

nav > a { 
       padding-left: 24px;
    }

    ul.pagination {
       margin: 0;
       padding: 0;
       padding-bottom: 8px;
       list-style:none;
    }

    ul.pagination li {
       margin: 0px 0px 0px 0px;
       clear: both;
       padding: 8px 10px 0px 24px;
       list-style: none;
    }

ul.pagination li:first-child {
       padding-top: 25px;
    }

    nav > a:hover, 
    nav ul.pagination li a:hover, 
    nav ul.pagination li.current a {
       color: #90705B;
    }

所以我根据上面提供的网站获得了此代码。我想要与照片部分相同的效果，然后是未连接到过滤器的普通菜单项。也就是说，当单击菜单项时，菜单会随子菜单一起扩展，并且页面会转到子菜单中的第一项。此外，子菜单项会被激活。

Answer 1

谷歌"scrollto jquery"

这是一个简单的

http://flesler.blogspot.in/2007/10/jqueryscrollto.html

Answer 2

我设法使用树形菜单在 jsfiddle 中展开和折叠子菜单。我在 jsfiddle 中对其进行了测试，并且可以正常工作。但是，它在我的网站上不起作用。菜单没有展开。我使用它的网站是一个单页网站。所以菜单项指向页面上的一个部分。所以，我猜我的 href="sub-1" 不起作用，因为它指向页面的第三部分。

是否有一个简单的解决方法？我不需要任何花哨的 jquery 效果，它只需要打开。

此外，当点击父项时，子菜单需要展开，需要激活第一个子项。我该怎么做？

HTML

<nav class="on_caption">
    <ul class="pagination">
        <li class="home current"><a href="#0">Home</a></li>
        <li class=""><a href="#1">About EJ</a></li>
        <li class=""><a href="#sub-1">Services</a>
            <ul id="sub-1">
                <li class=""><a href="#">Test</a></li>
                <li class=""><a href="#">Test</a></li>
            </ul>
        </li>
        <li class=""><a href="#3">Photos</a></li>
        <li class=""><a href="#4">Classes</a></li>
        <li class=""><a href="#6">Contact</a></li>
    </ul>                   
</nav>

CSS

.pagination > li ul {
    display: none;
}

.pagination > li ul:target {
    display: block;
}

Answer 3

取得了一些进展。

HTML

<nav class="on_caption">
    <ul class="pagination">
        <li class="home current"><a href="#0">Home</a></li>
        <li class=""><a href="#1">About EJ</a></li>
        <li class=""><a href="#sub-1">Services</a>
            <ul id="sub-1">
                <li class=""><a href="#">Test</a></li>
                <li class=""><a href="#">Test</a></li>
            </ul>
        </li>
        <li class=""><a href="#3">Photos</a></li>
        <li class=""><a href="#4">Classes</a></li>
        <li class=""><a href="#6">Contact</a></li>
    </ul>                   
</nav>

CSS

.pagination > li ul {
    display: none;
}

jQuery

jQuery(
  function($)
  {
    $('.pagination a').click(function(){$(this).next('ul').toggle();});
  }
);

现在可以了。当我单击菜单项时，子菜单会被扩展。但是，当单击另一个菜单项时，如何让子菜单再次折叠？以及如何让页面在点击菜单项时默认自动跳转到第一个子菜单项？