javascript - 使用 jquery 的响应式菜单

标签 javascript jquery html css

我正在开发响应式菜单。当我们调整屏幕大小时，菜单项将向下显示，工作正常，但问题是 onClick 红色按钮工作正常。当我刷新页面时，所有元素都可见。我希望在单击红色按钮之前将其隐藏，然后会出现菜单。 它是这样的我想 overflow hidden 菜单 enter image description here

onClick 工作正常。点击之前，会被隐藏 enter image description here

I have taken inspiration from here 

var h = 30;
var val = 0;

$('.click').click(function() {
  if ($('ul li.menu-item').hasClass('show')) {
    $('ul li.menu-item').removeClass('show');
    $('ul li.menu-item').removeClass('drop')
    return;
  }
  val = 0;
  $('ul li.menu-item').each(function() {
    var of = $(this).offset().top - $('ul li.menu-item').offset().top;
    if ( of > 20) {
      $(this).addClass('drop').css('opcaity', '1');;

      $(this).css('top', 'calc(100% + ' + val + 'px)');
      val += h;
    }
    $('ul li.menu-item').addClass('show');
  })
})
.primary-menu {
  position: relative;
  width: 64%;
  margin: 0 auto;
  max-height: 50px;
  overflow: hiddin;
  background: #ccc;
}

ul.menu-item {
  box-sizing: border-box;
  position: relative;
}

.menu-item {
  display: inline-block;
  text-decoration: none;
  color: #000000;
  font-size: 20px;
  padding: 10px;
  text-transform: capitalize;
  list-style: none;
  background-color: #88c0c7;
  position: relative;
}

li.drop {
  display: block;
  position: absolute;
  right: 0;
}

ul.sub-menu {
  flex-direction: column;
  position: absolute;
  top: 52px;
  display: none;
  background-color: #000;
  color: #fff;
}

.menu-item:hover ul.sub-menu {
  display: block;
}

.drop ul.sub-menu {
  position: absolute;
  top: 36%;
  left: -72%;
}

.click {
  position: absolute;
  opacity: 0;
  background: red;
  right: -5%;
  top: -2%;
  width: 40px;
  height: 40px;
  margin: 4px;
  z-index: 2;
}

.hide {
  opacity: 0;
}


/* Small Desktop Resolution and iPad Landscape
======================================================================== */

@media only screen and (min-width: 960px) and (max-width: 1024px) {
  .click {
    opacity: 1;
    right: 2%;
  }
}


/* iPad Portrait
======================================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .click {
    opacity: 1;
    right: 2%;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="primary-menu">
  <ul>
    <li class="menu-item">Home
      <ul class="sub-menu">
        <li class="sub-item">menu1</li>
        <li class="sub-item">menu2</li>
        <li class="sub-item">menu3</li>
      </ul>
    </li>
    <li class="menu-item">About us</li>
    <li class="menu-item">Service
      <ul class="sub-menu">
        <li class="sub-item">menu1</li>
        <li class="sub-item">menu2</li>
        <li class="sub-item">menu3</li>
      </ul>
    </li>
    <li class="menu-item">product</li>
    <li class="menu-item">packages</li>
    <li class="menu-item">contact</li>
    <li class="menu-item">menu7</li>
    <li class="menu-item">menu8</li>
    <li class="menu-item">menu9</li>
    <li class="menu-item">menu10</li>
    <li class="menu-item">menu11
      <ul class="sub-menu">
        <li class="sub-item">menu1</li>
        <li class="sub-item">menu2</li>
        <li class="sub-item">menu3</li>
      </ul>
    </li>
    <li class="menu-item">menu12</li>
    <li class="menu-item">menu13</li>
    <li class="menu-item">menu14
      <ul class="sub-menu">
        <li class="sub-item">menu1</li>
        <li class="sub-item">menu2</li>
        <li class="sub-item">menu3</li>
      </ul>
    </li>
  </ul>

  <div class="click"></div>
</div>

最佳答案

希望这会有用。

var h = 30;
var val = 0;

$('ul li.menu-item').each(function() {
    var of = $(this).offset().top - $('ul li.menu-item').offset().top;
    if ( of > 20) {
      $(this).addClass('hide');
    }
})

$('.click').click(function() {
 if ($('ul li.menu-item').hasClass('hide')) {
    $('ul li.menu-item').removeClass('hide');
  }
  $('ul li.menu-item').each(function() {
    if($(this).hasClass('drop')){
      $(this).addClass('hide');
    }
  });
  
  if ($('ul li.menu-item').hasClass('show')) {
    $('ul li.menu-item').removeClass('show');
    $('ul li.menu-item').removeClass('drop')
    return;
  }
  val = 0;
  $('ul li.menu-item').each(function() {
    var of = $(this).offset().top - $('ul li.menu-item').offset().top;
    if ( of > 20) {
      $(this).addClass('drop').css('opcaity', '1');;

      $(this).css('top', 'calc(100% + ' + val + 'px)');
      val += h;
    }
    $('ul li.menu-item').addClass('show');
  })
})
.primary-menu {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-height: 50px;
  overflow: hiddin;
  background: #ccc;
}

ul.menu-item {
  box-sizing: border-box;
  position: relative;
}

.menu-item {
  display: inline-block;
  text-decoration: none;
  color: #000000;
  font-size: 20px;
  padding: 10px;
  text-transform: capitalize;
  list-style: none;
  background-color: #88c0c7;
  position: relative;
}

li.drop {
  display: block;
  position: absolute;
  right: 0;
}

ul.sub-menu {
  flex-direction: column;
  position: absolute;
  top: 52px;
  display: none;
  background-color: #000;
  color: #fff;
}

.menu-item:hover ul.sub-menu {
  display: block;
}

.drop ul.sub-menu {
  position: absolute;
  top: 36%;
  left: -72%;
}

.click {
  position: absolute;
  opacity: 0;
  background: red;
  right: -5%;
  top: -2%;
  width: 40px;
  height: 40px;
  margin: 4px;
  z-index: 2;
}

.hide {
  opacity: 0;
}


/* Small Desktop Resolution and iPad Landscape
======================================================================== */

@media only screen and (min-width: 960px) and (max-width: 1024px) {
  .click {
    opacity: 1;
    right: 2%;
  }
}


/* iPad Portrait
======================================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .click {
    opacity: 1;
    right: 2%;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="primary-menu">
  <ul>
    <li class="menu-item">Home
      <ul class="sub-menu">
        <li class="sub-item">menu1</li>
        <li class="sub-item">menu2</li>
        <li class="sub-item">menu3</li>
      </ul>
    </li>
    <li class="menu-item">About us</li>
    <li class="menu-item">Service
      <ul class="sub-menu">
        <li class="sub-item">menu1</li>
        <li class="sub-item">menu2</li>
        <li class="sub-item">menu3</li>
      </ul>
    </li>
    <li class="menu-item">product</li>
    <li class="menu-item">packages</li>
    <li class="menu-item">contact</li>
    <li class="menu-item">menu7</li>
    <li class="menu-item">menu8</li>
    <li class="menu-item">menu9</li>
    <li class="menu-item">menu10</li>
    <li class="menu-item">menu11
      <ul class="sub-menu">
        <li class="sub-item">menu1</li>
        <li class="sub-item">menu2</li>
        <li class="sub-item">menu3</li>
      </ul>
    </li>
    <li class="menu-item">menu12</li>
    <li class="menu-item">menu13</li>
    <li class="menu-item">menu14
      <ul class="sub-menu">
        <li class="sub-item">menu1</li>
        <li class="sub-item">menu2</li>
        <li class="sub-item">menu3</li>
      </ul>
    </li>
  </ul>

  <div class="click"></div>
</div>

关于javascript - 使用 jquery 的响应式菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54103998/

上一篇：html - 嵌入 span 元素中的 FlexBox 对齐问题

下一篇：python - 如何防止执行脚本时打开 HTML 本地文件？

相关文章：

jQuery/Cycle/背景图片

javascript - iframe 破坏浏览器后退按钮 - 使用 Meteor 时如何修复

javascript - 如何定位在其父元素中具有类的子元素？

javascript - 使用 ng-idle 时访问范围变量

html - 手机版网站无法显示完整内容

javascript - 使用另一个脚本包含的节点加载脚本

PHP 搜索显示与查询完全不同的重复结果

JavaScript 在这里使用 eval 可以吗

未找到 jQuery : Uncaught ReferenceError: $ is not defined

jquery - 使用 jquery 的目标 node-webkit 浏览器

©2024 IT工具网  联系我们