Question

该网站是一个自适应网站，这就是您复制问题的方式：

在桌面宽度加载网站（导航元素加载正常）。
调整为平板电脑或移动设备尺寸（菜单转换为带有三个条形图标的移动式下拉菜单。
打开并关闭移动导航菜单（设置为display：none）。
现在，当您调整桌面宽度时，导航栏仍设置为display：none。

我知道我可以通过创建两个菜单栏并仅对它们应用单独的ID来解决问题，但我想看看是否有人有解决方案允许我只需要维护一个菜单。

HTML：

<nav>
    <ul id="menu">
        <li><a href="#">Who We Are</a></li>
        <li id="information">
            <a href="#">Why We're Different</a>
        </li>
        <li id="services">
            <a>GPA Services</a>
            <ul id="servicesmenu">
                <li><a href="#">HealthWatch</a></li>
                <li><a href="#">ClaimWatch</a></li>
                <li><a href="#">Administrative Services</a></li>
                <li><a href="#">Marketing and Sales</a></li>
                <li><a href="#">Specialty Services</a></li>
            </ul>
        </li>
        <li id="login"><a>Login</a>
            <ul id="loginmenu">
                <li><a href="#">Employers</a></li>
                <li><a href="#">Members</a></li>
                <li><a href="#">Brokers</a></li>
                <li><a href="#">Providers</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact Us</a>
        </li>
    </ul>
</nav>

jQuery：

$( document ).ready(function() {
  $("#menu-icon").click(function() {
        $("#menu").slideToggle(); 
  });
    $("#services").click(function() {
        $("#loginmenu").slideUp();
        $("#servicesmenu").slideToggle();
    });
    $("#login").click(function() {
        $("#servicesmenu").slideUp();
        $("#loginmenu").slideToggle();
    });
    $('html').click(function() {
        $("#loginmenu").slideUp();
        $("#servicesmenu").slideUp();
    });
    $('#login, #loginmenu, #services, #servicesmenu').click(function(event){
        event.stopPropagation();
    });
});

或者您可以在此处查看页面的测试版本（注意：页面/图像尚未针对加载时间进行优化，因此某些图像的大小会使加载时间变长一些）：

http://test.digital-scorpion.com/gpa/index.php

Answer 1

尝试将其添加到样式表中：

@media screen and (min-width:1199px) {
       #menu { display:block !important; }
}

Answer 2

单击该按钮时，它将更改保存菜单的ul的位置。再次单击以隐藏菜单时，它会更改所有内容，但会添加display:none。您需要从JS文件中删除它。

由于您使用的自定义函数slideToggle包含大多数单独的操作，因此很难删除。您可以重新创建自己的函数并调用它，或者只调用所有单独的操作。您也可以让它发生，然后将其重置为display:block;

$( document ).ready(function() {
  $("#menu-icon").click(function() {
        $("#menu").slideToggle().show(); 
  });
  ... JS Continues ...

修改

您可能遇到时间问题。您希望最后应用.show()并覆盖属于。.hide()的{{1}}。如果您将其作为完成功能放置，它将在另一个完成之后才会触发。

slideToggle()

Answer 3

示例HTML

<div class="navbar-container">
     <ul class="nav group pull-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Location</a></li>
        <li><a href="#">Activities</a></li>
        <li><a href="#">Tours</a></li>
        <li><a href="#">Administration</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact us</a></li>
     </ul>
     <a href="#" id="pull">Main Menu</a>
</div><!--navbar container-->

Jquery函数

  $(function() {
     var pull = $('#pull');
     menu     = $('.navbar-container ul');
     menuHeight = menu.height();

     $(pull).on('click', function(e) {
         e.preventDefault();
         menu.slideToggle();
      });

     $(window).resize(function(){
       var w = $(window).width();
       if(w > 320 && menu.is(':hidden')) {
           menu.removeAttr('style');
     }
     });
    });

样式

#pull {
  display: block;
  width: 80%;
  padding:5px;
  margin:0px auto 0 auto;
  text-decoration:none;
  color:#5a504c;
  background-color:#e7e5e2;
}

激活/取消激活移动菜单并调整其大小后，桌面菜单将消失

3 个答案: