Javascript 引导：如何折叠2个导航或更改一个导航的内容

你是我最后的希望我也是法国人。但是我正在努力提高我的英语水平，所以我会尽力在英语方面帮助你！（肯定有很多错误）

我认为您可以使用此解决方案：

首先：

<div class="littleMenu">
    <a href="#" class="icon-button youtube">
        <i class="fa fa-youtube-play"></i>
           <span></span>
    </a>
    <a href="#" class="icon-button youtube">
        <i class="fa fa-youtube-play"></i>
           <span></span>
    </a>
</div>

第三：

使用javascript/jquery函数在文档准备就绪时或像我一样调整大小时隐藏/显示它们：

$(document).ready(function() {

    if ($(window).width() <= 800){  
        $('#menu').hide();
        $('#menu2').show();       
    }   
    else if ($(window).width() > 800){  
        $('#menu').show();
        $('#menu2').hide();
        $('#menu3').hide();
    }     
});

$（文档）.ready（函数（）{
如果（$（窗口）.width（）800）{
$（“#菜单”）.show（）；
$（'#menu2'）.hide（）；
$（'#menu3'）.hide（）；
}     
});

及

/--------------调整大小------------//
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）800）{
$（“#菜单”）.show（）；
$（'#menu2'）.hide（）；
$（'#menu3'）.hide（）；
}
});

第二个解决方案使用相同的系统

希望它能帮助你

---

随时通知我。

最好的方法是使用实用程序，例如，将其添加到您的小菜单中，以在小屏幕上隐藏它们：

.hidden xs

对于较大的菜单使用

.visible xs block

或

.visible xs inline

取决于菜单的设置方式

---

如果只想根据宽度隐藏或显示元素，可以使用引导类

visible-xs : visible only in mobile (hidden for all other sizes)
hidden-xs : hide only in mobile (visible for all other sizes)

---

还请说明您到底想做什么？我添加了图像；）（我做得很快：s）那么什么不起作用？是否要根据设备的宽度隐藏或显示元素？我试过这个，但我不知道为什么它不能正常工作。。。欧元图标被移动了：p我做错什么了吗？拉哈尔和大卫的解决方案更好。试着使用它们。哦，我的上帝。。。这对于第一个解决方案来说很容易！它工作得非常好！非常感谢。现在我只需要找到第二种解决方案：这是两种解决方案的一个有效示例！再次感谢你；）

//----------- Resize ------------//
$(window).resize(function(){
    if ($(window).width() <= 800){  
        $('#menu').hide();
        $('#menu2').show();
    }
    if ($(window).width() > 800){   
        $('#menu').show();
        $('#menu2').hide();
        $('#menu3').hide();
    }

});

visible-xs : visible only in mobile (hidden for all other sizes)
hidden-xs : hide only in mobile (visible for all other sizes)