javascript - 我需要像包含的示例一样进行下拉和下拉

Question

<分区>

Answer 1

那么你可以使用 CSS media queries在 viewport/screen 时应用不同的样式调整大小:

@media (max-width:600px) {
/* if the viewport is less than or equal to 600px hide the div */
    div { display:none; }
}

如果你有这样的标记结构:

<nav> 
<span>NAV</span>
<ul>
    <li>Home</li>
    <li>About</li>
    <li>News</li>
</ul>
</nav>

那么 CSS 将是:

ul {
    display:block;
}
li {
    display:inline-block;
    height:30px;
    line-height:30px;
}
span {
    display:none;
    height:30px;
    line-height:30px;
    cursor:pointer;
}
@media (max-width:600px) {
    ul {
        display:none;
    }
    li {
        display:block;
    }
    span {
        display:inline;
    }
}

然后在您单击 NAV 时显示/隐藏下拉菜单:

$('span').click(function () {
    $(this).siblings('ul').slideToggle('slow');
});

查看此 jsfiddle .

---

现在，当您单击 <span>再次隐藏下拉菜单，然后将视口(viewport)宽度调整为大于 600 内联菜单列表未显示。这是由于 .slideToggle() , js/jQuery 将其样式设置为内联属性 <ul style="">在元素上并覆盖 CSS 样式。您可以通过声明 !important 来绕过它在您的 CSS 上否决 jQuery 样式，但在这种情况下它不会有帮助，因为我们使用 jQuery 来滑动下拉菜单。

一个解决方案是处理 viewport/window也可以通过 jQuery 调整大小。 CSS 媒体查询监听 window.innerWidth但这可能会在跨浏览器(尤其是较旧的 IE)上返回不同的值。所以我们需要创建一个返回 viewport-width 的函数:

function viewportWidth() {
    var e = window,
        a = 'inner';
    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return e[a + 'Width'];
}

然后在窗口上使用它resize事件:

$(window).resize(function () {
    if (viewportWidth() <= 600) {
        $('span').show();
        $('ul').hide();
    } else {
        $('ul').show();
        $('span').hide();
    }
});

检查这个jsfiddle .