Question

我有一个我正在处理的导航页面的代码，可以在tumblr平台上使用。导航基本上是这样设置的，其中#navstart是导航项的类别，＃navitem用于单个项目。下面是我如何格式化它的片段。

<div class="navstart" style="display: inline"><img src="http://s28.postimg.org/fsjo9bo7x/themes.jpg"></div>
<div class="navitem" style="display: inline">
    <a href="/tagged/my%20themes"><img src="http://s7.postimg.org/y3jld46m3/mythemestile.jpg">
    <a href="/tagged/main%20page"><img src="http://s29.postimg.org/80fdvp0mv/mainpagethemes.jpg">
    <a href="/tagged/char%20page"><img src="http://s23.postimg.org/4lsf45izf/musepagethemes.jpg">
    <a href="/tagged/nav%20page"><img src="http://s9.postimg.org/ilwgc60r3/navigationpagethemes.jpg">

我尝试将所有#navitem div隐藏起来，直到我点击#navitem所属的#navstart div，这将使该类别中的所有navitems显示出来。我怎样才能做到这一点？

Answer 1

在此JSFiddle中如何利用.toggle()实现show（）/隐藏在jQuery中的切换

正如Steven建议的那样，使用一组<ul>和<li>来实现它是一个好习惯。

＆＃13;

$('.toggle-nav').on('click', function () {
    $('.inner', this).toggle();
});

＆＃13;

* {
    padding:0;
    margin:0;
}
.toggle-nav>span {
    cursor:pointer;
    width:120px;
    height:20px;
    display:block;
    background-color:#555;
    color:#EEE;
    padding:5px 10px;
    font-weight:bold;
}
.inner {
    list-style-type:none;
    display:none;
}
.inner .item {
    height:50px;
    background-color:#CCC;
    border-bottom:1px dashed #999;
    text-align:center;
    margin-bottom:1px;
    padding-top:20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toggle-nav"> <span>Click to Toggle!</span>

    <ul class="inner">
        <li class="item">One</li>
        <li class="item">Two</li>
        <li class="item">Three</li>
    </ul>
</div>

＆＃13;

Answer 2

1.首先是用于隐藏子菜单的CSS：

.navitem {
    display: none;
}

2.从navitem移除display: inline; - 使用<div class="navitem" style="display: inline">更改<div class="navitem">。

2.之后包括jQuery库：

3.最后在您的页面中包含此脚本：

$(document).ready(function(){
    $('.navstart').click(function(){
        if ($(this).hasClass('active')) {
            $('.navitem').stop(true, true).fadeOut();
        } else {
            $('.navitem').fadeIn();
        };

        $(this).toggleClass('active');
    });
});

使用jQuery切换菜单可见性

2 个答案: