更改屏幕尺寸时更改功能区菜单

Question

目前我有这个菜单

 var navBtnActive = true; // menu opened? $(document).ready(function () { $('body').click(function (e) { if ($(e.target).attr('id') !== 'navContainer') { // close menu when clicking outside $("#navContent").slideUp(); navBtnActive = false; } }); $("#navBtn").click(function (e) { // toggle the menu when clicking an item e.stopPropagation(); navBtnActive = !navBtnActive; $("#navContent").slideToggle(); }); }); 

 #header{ height: 21px; background-color: #129934; } #navContainer { position: relative; display: inline-block; } .toggleBtn{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="header"> <div id="navContainer"> <button id="navBtn">Menu</button> <div id="navContent"> <button class="toggleBtn">Button 1</button> <button class="toggleBtn">Button 2</button> <button class="toggleBtn">Button 3</button> </div> </div> </div> 

因此，此菜单将处理移动设备或类似设备。 当有大屏幕时，我希望菜单看起来像这样

 #header{ height: 21px; background-color: #129934; } 

 <div id="header"> <button>Button 1</button> <button>Button 2</button> <button>Button 3</button> </div> 

减小屏幕尺寸时是否可以将菜单切换到较小的菜单？

Answer 1

更新时，您可能已经注意到，当您单击按钮以隐藏导航按钮，然后调整其大小时，它们都被隐藏了。 原因是jQuery slideup()添加了一个内联样式的display: none; 。 现在您可以使用!important删除它，但是事情开始变得混乱了。

因此，这是另一种解决方案，它将是比上一个更好的方法。 jsFiddle调整大小

实际上，它要简单得多。 所有javascript / jQuery所做的就是添加/隐藏（切换） hidden的类名。 动画（这些天）都可以用CSS3完成。 这样，无论视口大小如何，您始终可以完全控制外观。 希望对您有所帮助，祝您编程愉快。

 $(document).ready(function () { $("#navBtn").click(function (event) { event.preventDefault(); event.stopPropagation(); $("#navContent").toggleClass('hidden'); }); }); 

 #header{ height: 21px; background-color: #129934; } #navBtn { display: none; } #navContent button { display: inline-block; } #navContainer { position: relative; display: inline-block; } @media screen and (max-width: 540px){ #navBtn { display: block; } #navContent { height: auto; transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease-in-out; } #navContent.hidden { transform: scaleY(1); } #navContent button { display: block; } } 

 <div id="header"> <div id="navContainer"> <button id="navBtn">Menu</button> <div id="navContent"> <button class="toggleBtn">Button 1</button> <button class="toggleBtn">Button 2</button> <button class="toggleBtn">Button 3</button> </div> </div> </div> 

上一个（第一个）解决方案：看看这个小提琴 ，您可以在其中调整视口的大小，看看会发生什么：

这是您第一个示例中的代码，几乎没有做任何更改即可将其用于移动设备或台式机：

 var navBtnActive = true; // menu opened? $(document).ready(function () { $('body').click(function (e) { if ($(e.target).attr('id') !== 'navContainer') { // close menu when clicking outside $("#navContent").slideUp(); navBtnActive = false; } }); $("#navBtn").click(function (e) { // toggle the menu when clicking an item e.stopPropagation(); navBtnActive = !navBtnActive; $("#navContent").slideToggle(); }); }); 

 #header{ height: 21px; background-color: #129934; } #navBtn { display: none; } #navContent button { display: inline-block; } #navContainer { position: relative; display: inline-block; } @media screen and (max-width: 540px){ #navBtn { display: block; } #navContent button { display: block; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="header"> <div id="navContainer"> <button id="navBtn">Menu</button> <div id="navContent"> <button class="toggleBtn">Button 1</button> <button class="toggleBtn">Button 2</button> <button class="toggleBtn">Button 3</button> </div> </div> </div> 

Answer 2

如评论中所述，您可以使用媒体查询来更改按钮的对齐方式，如下所示：

@media (max-width: 960px) {
  #navContainer {
    display: flex;
 }
  #navContent {
    display: flex;
}

例

https://jsfiddle.net/3w7xngpf/3/