Question

希望让jquery切换功能适用于我的导航栏。我希望能够点击“关于”和“慈善”部分来打开内部的UL列表，也可以关闭点击。嵌套在每个中的ul只应在单击时显示。

HTML

<body>
    <div id="wrapper">
        <header>
            <div class="logo"><a href="index.html"><img src="http://i.imgur.com/IL1agD5.png"/></a></div>
            <div class="chapter"><a><img src="http://i.imgur.com/RPIvgdD.png"/></a></div>
        </header>
        <nav>
            <ul class="menu">
                <li><a href="#">Home</a>

                <li class="dropdown"><a href="">About ▾</a>
                    <ul class = "sub-menu">
                        <li><a href="#">History</a>
                        </li>
                        <li><a href="#">Brothers</a>
                        </li>
                    </ul>
                <li class = "dropdown"><a href="">Philanthropy ▾</a>
                    <ul class="sub-menu">
                        <li><a href="#">Kovacs Color Run</a>
                        </li>
                        <li><a href="#">Greek God</a>
                        </li>
                        <li><a href="#">Boys & Girls Club</a>
                        </li>
                    </ul>

                <li><a href="#">Membership</a>
                <li><a href="#">Photos</a>
                <li><a href="#">Contact</a>

            </ul>
        </nav>

CSS

* {
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}

#wrapper {
    min-width:900px;
    margin:0 auto;
}
body {
    margin:0px;
    padding:0px;
}

header {
    height:100px;
    width:100%;
    background:black;
    margin:0 auto;

}
.logo{
    padding-left:10px;
    float:left;
    padding-top:5px;
}

.chapter {
    float:right;
    padding-top:15px;
    padding-right:10px;
}


.menu{
    margin:0 auto;
    padding:0 ;
    text-align:center;
    clear:both
}

ul.menu {
    background-image: -o-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -moz-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -webkit-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -ms-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: linear-gradient(to bottom, #ACB5B5 0%, #E2F0EA 100%);
    height: 40px;
    width: 100%;
    border-left:solid 1px #22674A;
    white-space: nowrap;
    text-align:center;
}

ul.menu > li {
    position: relative;
    display:inline-block;
    list-style:none;
    text-align:center;
    width:16.66%;
    border-style:1px #22674A;
}
ul.menu li:first-child a {
    border-left:none;
}
ul.menu ul li a {
    border:none;
}
ul.menu ul {
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100% );
    position: absolute;
    padding:0;
    border-left:none;
    border:solid 1px #22674A;
    width:100%;
    text-align:center;

}
ul.menu a {
    cursor: pointer;
    display: block;
    color: #22674A;
    line-height: 40px;
    text-decoration:none;
    font-weight:500;
    font-family: 'Bree Serif', serif;
    border-left:solid 1px #22674A; 
}
ul.menu li {
    list-style: none;
}

JAVASCRIPT

$(document).ready(function(){
  $(".dropdown").click(function(){
    $(".sub-menu").toggle(1000);
  });
});

FIDDLE

http://jsfiddle.net/mc38nkdm/

Answer 1

您需要将toggle的范围仅限于所点击元素的子.sub-menu：

$(document).ready(function(){
  $(".dropdown").click(function(){
    $(this).find(".sub-menu").toggle(1000);
  });
});

Answer 2

首先隐藏你的子菜单。然后，将您的JS更改为：

$(document).ready(function(){
    $(".sub-menu").hide();
    $(".dropdown").click(function(){
        $(this).find(".sub-menu").toggle(1000);
        return false; 
    });
});

小提琴：http://jsfiddle.net/praveenscience/mc38nkdm/1/

Answer 3

点击此链接jsfiddle，查看使用find和toggle功能的工作示例。你还可以将CSS display:none;添加到子菜单样式中，这样子菜单就不会出现在加载状态。

希望它有用！

切换CSS3导航栏的功能

3 个答案:

小提琴：http://jsfiddle.net/praveenscience/mc38nkdm/1/