Javascript 如何使导航栏仅在移动视图中折叠

在全屏视图中，导航栏出现崩溃问题。我希望导航条通过移动屏幕在汉堡包中折叠，我编写了一个自定义指令。现在，当你在全屏上点击一个链接时，导航栏就会崩溃，并引起恼人的闪烁！任何想法或帮助都将不胜感激！ 这是我的密码：

js:

html:

显示菜单

因此，如果您想消除较大屏幕上的折叠，您必须在链接单击功能中添加屏幕宽度检查。而且，如果它小于某个大小，则可以启动.navbar切换单击功能。否则，你什么也不做。您可以使用

$（window.width（）

检查屏幕宽度。因此，您的指令代码将变成：

.directive('collapseMenu', function () {
    return {
        link: function (scope, elem, attrs) {
            $('.nav a').on('click', function(){
                if ($(window).width() <= 1200) {
                  $('.navbar-toggle').click(); 
                }
            });
        }
    }
});

指令（'collapseMenu'，函数（）{ 返回{ 链接：功能（范围、要素、属性）{ $（'.nav a'）。在（'click'，function（）上{

---

如果（$（window）.width（）那么，如果要消除较大屏幕上的折叠，则必须在链接单击函数中添加屏幕宽度检查。如果小于某个大小，则启动.navbar切换单击函数。否则，您什么也不做。您可以使用

$（window）.width（）检查屏幕宽度

。因此，您的指令代码将变成：

.directive('collapseMenu', function () {
    return {
        link: function (scope, elem, attrs) {
            $('.nav a').on('click', function(){
                if ($(window).width() <= 1200) {
                  $('.navbar-toggle').click(); 
                }
            });
        }
    }
});

指令（'collapseMenu'，函数（）{ 返回{ 链接：功能（范围、要素、属性）{ $（'.nav a'）。在（'click'，function（）上{

---

if（$（窗口）.width（）对不起，我有点像个傻瓜，我真的不知道如何将它添加到我的指令中。你能告诉我你的意思吗？屏幕大小是1200px。当然！更新了IncludeGraat的答案！我很高兴它成功了！你能把它标记为答案吗？那将是非常感谢的！当然！！我试图点击向上箭头，但我没有足够的代表来回答很遗憾！我把它标记为正确的，因为它是100%棒极了！再次感谢！对不起，我是一个傻瓜，我真的不知道如何将它添加到我的指令中。你能告诉我你的意思吗？屏幕大小是1200px。当然！更新了IncludeGraat的答案！我很高兴它工作了！你能把它标记为答案吗？那将非常感谢！当然当然！！我试着打向上箭头，但我没有足够的重复率来做这件事，很遗憾！我把它标记为正确的，因为它100%棒极了！再次感谢！

.directive('collapseMenu', function () {
    return {
        link: function (scope, elem, attrs) {
            $('.nav a').on('click', function(){
                if ($(window).width() <= 1200) {
                  $('.navbar-toggle').click(); 
                }
            });
        }
    }
});