目前我有这个菜单



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>





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

最佳答案

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

因此,这是另一种解决方案,它将是比上一个更好的方法。 jsFiddle to resize

实际上,它要简单得多。所有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>





上一个(第一个)解决方案:
检出this fiddle,您可以在其中调整视口的大小并查看会发生什么:

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


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>

09-17 14:28
查看更多