当屏幕宽度小于时如何在Javascript中删除clone（）规则

Question

我一直在摆弄我的导航菜单，并决定添加一项功能，当您向下滚动超过某个点时，NAV 会向下滑动到视口中，这样用户就不必向上滚动到顶部页面进行导航。这是最近很流行的东西。

所以我摆弄了一下，这个 javascript 做到了（请注意，我一点也不流利使用 jquery）：

jQuery(document).ready(function($){
$(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));
$(window).on("scroll", function () {
    $("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
});

});

现在我把它读作......复制或“克隆”（制作另一个）.menu_wrapper 元素在原始元素之前 + 添加类 .shrink 到它......并且只有当我们滚动超过 700 像素时，我们才会由于类 .slidedown

而看到这个重复的 NAV

CSS：

.shrink { position:fixed; top:-400px; left:0; width:100%; border-top: 0px solid #35d3c3; z-index:99999}
.slidedown .shrink { top:0;}

现在这是 100% 的工作，我很兴奋但是（它从来都不是一帆风顺的！！！）现在，当我将视口更改为小于 767 像素的屏幕宽度时，我遇到了问题 - 是的，我的网站是响应式，这是我的 NAV 通过使用 css 和 javascript 更改为典型下拉列表（即使没有上面的 javascript / 效果）：

jQuery(document).ready(function($){
$('.menu_wrapper').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
    $("#menu").slideToggle();
    $(this).toggleClass("active");
});
});

我的问题是现在有一个重复的下拉列表预先设置 NAV（1 在另一个之上），如下所示：

---

+ 菜单

---

+ 菜单

一个 NAV 工作，但另一个不工作......无论如何，当我的媒体查询命中“移动状态”（低于 767 像素）并且 NAV 位于下拉列表之前，这是我不想要整个向下滑动效果克隆（上面发布的第一个 jquery）的东西了。当我的屏幕宽度低于 767 像素时，我希望该规则几乎不存在或不适用。我怎样才能做到这一点？

我已经尝试过一种显而易见的方法：

.shrink { display:none}
.slidedown .shrink { display:none} 

这几乎好像我中了大奖，只剩下 1 个前置菜单：

---

+ 菜单

但是当我点击它时没有任何反应 - 它不会向下滑动并显示菜单列表项。

但我想为 javasacript 添加一条规则：

jQuery(document).ready(function($){
$(".menu_wrapper").before($(".menu_wrapper").clone().addClass("shrink"));
$(window).on("scroll", function () {
    $("body").toggleClass("slidedown", ($(window).scrollTop() > 700));
});

});

当我们的宽度低于 767px 时，我们会忽略 clone() 函数/规则等？

我已经对 removeclass 等进行了一些谷歌搜索，但是因为我是 javascript 的傻瓜，所以我可能做错了。

有什么帮助吗？

Answer 1

既然您想根据某些视口尺寸隐藏该菜单，为什么不使用媒体查询？

@media all and (max-width: 766px){
    .shrink{ display: none; }
}

或

.shrink{ display: none; }

@media all and (min-width: 767px){
    .shrink{ display: block; }
}

（这可能不是在那里使用的最佳宽度值或 CSS 属性，但这应该可以帮助您入门。）

编辑：如果您想在 javascript 中完成所有操作，the matchMedia() API 也适合您。

Answer 2

如果 ajm 发布的 CSS 媒体查询方法不适合您，您可以尝试仅在满足媒体查询时才执行您的代码。 handleMediaQuery() 中的代码只有在宽度大于 767px 时才会运行；

//Media query listeners
var mql = window.matchMedia("(min-width: 767px)");
mql.addListener(handleMediaQuery);
handleMediaQuery(mql);

function handleMediaQuery(mql) {
    if (mql.matches) {
        // Do stuff here that you want done when the query matches
    }
    else {
        // Do stuff here that you want done when the query does not match
    }
}

更多信息请见https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries