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

google "scrollto jquery"

这是一个简单的

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

Answer 2

我设法使用树状菜单将子菜单展开并在jsfiddle中折叠。我在jsfiddle中测试了它并且在那里工作。但是，它在我的网站上不起作用。菜单不会扩展。我使用它的网站是一个单页网站。因此菜单项指向页面上的一个部分。所以，我猜我的href =“sub-1”不起作用，因为它指向页面的第3部分。

这有简单的解决方法吗？我不需要任何花哨的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();});
  }
);

现在可以使用了。当我单击菜单项时，子菜单会被消耗掉。但是，当单击另一个菜单项时，如何让子菜单再次折叠？如果单击菜单项，如何让页面自动转到第一个子菜单项？

导航子菜单单页网站

3 个答案: