1

此脚本适用于带有下拉菜单的无序列表。第二部分控制在平板电脑/移动设备上查看时的包含元素。我遇到的问题是窗口调整大小事件没有在项目中一致地触发。

此外，当从一个小窗口大小的浏览器转到一个更大的大小时，下拉菜单突然无法摆脱包含的 Nav 元素。

$(document).ready(function () {
$('ul.primary li').click(function () {
    var a = this;
    if ($('ul', this).is(':visible')) {
        $('ul', this).slideUp(function () {
            $(a).removeClass('active')
        })
    } else {
        $('ul.drop').slideUp();
        $('ul.primary li').removeClass('active');
        $('ul', this).slideDown();
        $(a).addClass('active')
    }
});
$('body').click(function (a) {
    if (!$(a.target).is('a')) {
        $('ul.drop').slideUp();
        $('ul.primary li').removeClass('active')
    }
});
$(function () {
    $('.mobile-nav').click(function (e) {
        $('.primary').slideToggle(150, "swing");
        e.stopPropagation()
    });
    $(window).resize(function() {
        $('ul.drop').slideUp();
        $('ul.primary li').removeClass('active')
    });
})
});

这是标记：

<div class="nav">
    <div class="mobile-nav">Navigation</div>
        <ul class="primary">
            <li><a href="#link">Link</a></li>
            <li><a class="has-drop">Link w/ Children <span></span></a>
            <ul class="drop">
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
            </ul>
            </li>
            <li><a class="has-drop" href="#link">Link w/ Children <span></span></a>
            <ul class="drop">
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
                <li><a href="#link">Link</a></li>
            </ul>
            </li>
            <li><a href="#link">Link</a></li>
            <li><a href="#link">Link</a></li>
        </ul>
        <div class="clear"></div>
    </div>
</div>

和CSS：

.clear { 
clear:both; }
.nav {
display:block;
width:100%; 
background:#222; }

.mobile-nav {
visibility: hidden;
padding: 0;
height: 0px; }

ul.primary {
background: #222;
list-style: none;
height: 45px;
min-width: 350px;
position: relative;
margin: 10px 0 0 0;
padding: 0;
float: right; }

ul.primary li {
    float: left;
    display: inline;
    font-weight: bold;
    font-size: 13px;
    max-width: 100%; }

    ul.primary li a, ul.drop li a {
        display: block;
        padding: 10px;
        color: white;
        text-decoration: none; }

ul.drop li a { padding: 5px; }

ul.primary li a:hover, ul.drop li a:hover { background: #444; }

ul.primary li, ul.drop li { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }

ul.primary li.active > a { background: #444; }

a.has-drop { cursor: pointer; }

a.has-drop span {
    margin: -8px 0 0 5px;
    width: 10px;
    height: 5px;
    float: right;
    background: url("drop-caret.png") no-repeat center right; }

li.active > a.has-drop span {
margin: -8px 0 0 5px;
width: 10px;
height: 5px;
float: right;
background: url("drop-caret-up.png") no-repeat center right; }

ul.drop {
display: none;
z-index: 999;
position: relative;
margin: 0;
padding: 0;
min-width: 100%;
width: auto;
width: auto;
list-style: none;
background: #242424;
border: none; }

ul.drop li {
    float: none;
    font-weight: normal; }

@media only screen and (max-width: 767px) {
nav {
display: block;
width: 100%;
border: 0px solid white;
padding: 10px 0; }

.mobile-nav {
visibility: visible;
height: auto;
margin: 0 5px;
padding: 10px 0;
font-weight: bold;
color: white;
cursor: pointer;
background: url("mobile-nav.png") no-repeat center right; }

ul.primary {
float: none;
display: none;
height: auto;
margin: 0;
padding: 0; }

ul.primary li {
    display: block;
    float: none;
    border-bottom: 1px solid #444; }

    ul.primary li:last-child { border-bottom: none; }

ul.drop li, ul.primary li.active { border-bottom: none; }

ul.drop li a {
text-indent: 15px;
font-size: 12px;
font-style: italic; }

a.has-drop span {
margin: 5px 0 0 5px;
width: 10px;
height: 5px;
float: right;
background: url("drop-caret.png") no-repeat center right; }

li.active > a.has-drop span {
margin: 5px 0 0 5px;
width: 10px;
height: 5px;
float: right;
background: url("drop-caret-up.png") no-repeat center right; }
}
4

0 回答 0