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

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

update 您可能已经注意到，当单击按钮以隐藏导航按钮，然后调整大小时，它们都被隐藏了。原因是 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/