当屏幕宽度小于屏幕宽度时，如何删除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));
});

});

现在，我将其读取为...重复或'clone'（另作一个）.menu_wrapper元素，然后+在其上添加类.shrink ...并且仅当我们滚动超过700px时，我们才会看到此重复项由于.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％，但是我很烦（但是这从来都不是顺风顺水！）现在，当我将视口更改为小于767px的屏幕宽度时，我遇到了问题-是的，我的网站具有响应能力，是通过使用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（在另一个之上），如下所示：

---

+菜单

---

+菜单

一个NAV有效，但另一个不起作用...无论如何，当我的媒体查询达到“移动状态”（低于767px）并且NAV出现下拉菜单时，这就是我不想整个滑落的时候-effect-clone（上面发布的第一个jquery）的东西了。 当我的屏幕宽度小于767px时，我希望该规则几乎不存在或不适用。 我怎样才能做到这一点？

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

.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中做整个事情， 那么matchMedia() API也在那里。

Answer 2

如果ajm发布的CSS媒体查询方法对您不起作用，则可以在遇到媒体查询时尝试仅执行代码。 仅当宽度大于767px时， handleMediaQuery()的代码才会运行；

//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