2020年新年大赛！

Question

Ram Ce

Asked:2020-03-05 17:10:12 +0800 CST2020-03-05 17:10:12 +0800 CST 2020-03-05 17:10:12 +0800 CST

返回媒体查询动作

772

我写了一个小的自适应菜单脚本，当屏幕宽度小于 999px 时，菜单消失并出现一个图标来打开这个菜单。但是如果你把它隐藏在一个小屏幕尺寸，然后增加浏览器尺寸（也就是让它大于999px），菜单就不会出现回来，希望我解释清楚。请帮助解决这个问题

$(document).ready(function() {
    var menuIcon = $('.menuIcon');
    menuIcon.on('click', function(e){
        e.preventDefault;
        $(this).toggleClass('menuIconActive');
    });
    menuIcon.on('click', function(){
        $('#menu').toggleClass('menuOpen');
        if($('#menu').hasClass('menuOpen')){
            $('#menu').fadeIn(500);
        } else {
            $('#menu').fadeOut(500);
        }
    });
    if ($(window).width() >= '999') {
        $('#menu').css(display, flex);
    }
});

header {
   width: 100%;
   height: 70px;
   background: var(--dark);
}

.menuItems {
display: flex;
justify-content: space-around;
}

.menuItem {
   display: inline-block;
   text-transform: uppercase;
}

.menuIcon {
   display: none;
   position: relative;
   width: 50px;
   height: 50px;
   cursor: pointer;
}

.menuIcon a {
   display: block;
}

.menuIcon span,
.menuIcon span::before,
.menuIcon span::after {
   position: absolute;
   top: 50%;
   margin-top: -1px;
   left: 50%;
   margin-left: -10px;
   width: 20px;
   height: 2px;
   background-color: var(--light);
}

.menuIcon span::before,
.menuIcon span::after {
   content: '';
   display: block;
   transition: .3s;
}

.menuIcon span::before {
   transform: translateY(-5px);
}

.menuIcon span::after {
   transform: translateY(5px);
}

.menuIconActive span {
   height: 0;
}

.menuIconActive span::before {
   transform: rotate(45deg);
}

.menuIconActive span::after {
   transform: rotate(-45deg);
}

@media screen and (max-width:999px) {
   .menu {
      display: none;
   }

   .menuIcon {
      display: inline-block;
   }

   .menuItems {
      position: fixed;
      display: block;
      top: 0;
      right: 0;
      left: 0;
      margin-top: 52px;
      background-color: var(--mainColor);
      z-index: 1000;
      overflow: auto;
   }

   .menuItem {
      display: block;
      padding: 10px 0;
      text-align: center;
      color: var(--light);
   }
}

.menuOpen .menuItem {
   display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<header>
      <div class="menu" id="menu">
         <div class="menuItems">
            <a href="#" class="menuItem">Главная</a>
            <a href="#" class="menuItem">Наша команда</a>
            <a href="#" class="menuItem">Приемущества</a>
            <a href="#" class="menuItem">Связь с нами</a>
         </div>
      </div>

      <!-- Mobile menu icon -->
      <div class="menuIcon">
         <a href="#">
            <span></span>
         </a>
      </div>
   </header>

2 个回答

Voted

Denis640Kb · Answer 1 · 2020-03-05T22:51:25+08:00

您需要跟踪窗口的大小，并相应地检查宽度。
最好使用参数block而不是flex，这样它们就不会合并为一个单词。
例子：

    $(document).ready(function() {
        var menuIcon = $('.menuIcon');
        menuIcon.on('click', function(e){
            e.preventDefault;
            $(this).toggleClass('menuIconActive');
        });
        menuIcon.on('click', function(){
            if($('#menu').hasClass('menuOpen')){
                $('#menu').fadeIn(500);
            } else {
                $('#menu').fadeOut(500);
            }
            $('#menu').toggleClass('menuOpen');
        });
        $(window).resize(function () {
            if ($(window).width() >= '999') {
                $('#menu').css('display', 'block');
            }
        })
    });

    header {
        width: 100%;
        height: 70px;
        background: var(--dark);
    }

    .menuItems {
        display: flex;
        justify-content: space-around;
    }

    .menuItem {
        display: inline-block;
        text-transform: uppercase;
    }

    .menuIcon {
        display: none;
        position: relative;
        width: 50px;
        height: 50px;
        cursor: pointer;
    }

    .menuIcon a {
        display: block;
    }

    .menuIcon span,
    .menuIcon span::before,
    .menuIcon span::after {
        position: absolute;
        top: 50%;
        margin-top: -1px;
        left: 50%;
        margin-left: -10px;
        width: 20px;
        height: 2px;
        background-color: var(--light);
    }

    .menuIcon span::before,
    .menuIcon span::after {
        content: '';
        display: block;
        transition: .3s;
    }

    .menuIcon span::before {
        transform: translateY(-5px);
    }

    .menuIcon span::after {
        transform: translateY(5px);
    }

    .menuIconActive span {
        height: 0;
    }

    .menuIconActive span::before {
        transform: rotate(45deg);
    }

    .menuIconActive span::after {
        transform: rotate(-45deg);
    }

    @media screen and (max-width:999px) {
        .menu {
            display: none;
        }

        .menuIcon {
            display: inline-block;
        }

        .menuItems {
            position: fixed;
            display: block;
            top: 0;
            right: 0;
            left: 0;
            margin-top: 52px;
            background-color: var(--mainColor);
            z-index: 1000;
            overflow: auto;
        }

        .menuItem {
            display: block;
            padding: 10px 0;
            text-align: center;
            color: var(--light);
        }
    }

    .menuOpen .menuItem {
        display: block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <div class="menu" id="menu">
        <div class="menuItems">
            <a href="#" class="menuItem">Главная</a>
            <a href="#" class="menuItem">Наша команда</a>
            <a href="#" class="menuItem">Приемущества</a>
            <a href="#" class="menuItem">Связь с нами</a>
        </div>
    </div>

    <!-- Mobile menu icon -->
    <div class="menuIcon">
        <a href="#">
            <span>123</span>
        </a>
    </div>
</header>

fanfer · Answer 2 · 2020-03-05T17:16:49+08:00

$(document).ready(function() {
  function someFunc() {
    var menuIcon = $('.menuIcon');
    menuIcon.on('click', function(e) {
      e.preventDefault;
      $(this).toggleClass('menuIconActive');
    });
    menuIcon.on('click', function() {
      $('#menu').toggleClass('menuOpen');
      if ($('#menu').hasClass('menuOpen')) {
        $('#menu').fadeIn(500);
      } else {
        $('#menu').fadeOut(500);
      }
    });
    if ($(window).width() >= '999') {
      $('#menu').css(display, flex);
    }
  }
  someFunc();

  $(window).resize(function() {
    someFunc();
  })
});

header {
  width: 100%;
  height: 70px;
  background: var(--dark);
}

.menuItems {
  display: flex;
  justify-content: space-around;
}

.menuItem {
  display: inline-block;
  text-transform: uppercase;
}

.menuIcon {
  display: none;
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.menuIcon a {
  display: block;
}

.menuIcon span,
.menuIcon span::before,
.menuIcon span::after {
  position: absolute;
  top: 50%;
  margin-top: -1px;
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 2px;
  background-color: var(--light);
}

.menuIcon span::before,
.menuIcon span::after {
  content: '';
  display: block;
  transition: .3s;
}

.menuIcon span::before {
  transform: translateY(-5px);
}

.menuIcon span::after {
  transform: translateY(5px);
}

.menuIconActive span {
  height: 0;
}

.menuIconActive span::before {
  transform: rotate(45deg);
}

.menuIconActive span::after {
  transform: rotate(-45deg);
}

@media screen and (max-width:999px) {
  .menu {
    display: none;
  }
  .menuIcon {
    display: inline-block;
  }
  .menuItems {
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    left: 0;
    margin-top: 52px;
    background-color: var(--mainColor);
    z-index: 1000;
    overflow: auto;
  }
  .menuItem {
    display: block;
    padding: 10px 0;
    text-align: center;
    color: var(--light);
  }
}

.menuOpen .menuItem {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<header>
  <div class="menu" id="menu">
    <div class="menuItems">
      <a href="#" class="menuItem">Главная</a>
      <a href="#" class="menuItem">Наша команда</a>
      <a href="#" class="menuItem">Приемущества</a>
      <a href="#" class="menuItem">Связь с нами</a>
    </div>
  </div>

  <!-- Mobile menu icon -->
  <div class="menuIcon">
    <a href="#">
      <span></span>
    </a>
  </div>
</header>

返回媒体查询动作

代码不起作用，循环混乱

使用 flex-wrap: wrap 时发生的填充如何以及相对于什么？

用列表理解替换扩展

如何找到多个数字列表的中位数？

帮助 c++ 代码（数组）

如何使随机数不重复

')'标记之前的C++错误预期主表达式错误[关闭]

如何获取整个 mongodb 字典，或获取它的数组？Python

按表进行复杂过滤

带转换的复制

返回媒体查询动作

2 个回答

相关问题