文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >无法在移动设备上隐藏子菜单并在单击时显示它

问无法在移动设备上隐藏子菜单并在单击时显示它
EN

Stack Overflow用户
提问于 2018-12-15 03:13:38
回答 1查看 1.2K关注 0票数 0

我在StackOverflow上找到了几种方法来回答这个问题，但在我的Wordpress主题上都不能正常工作。js/JQuery非常新，从我开始解决这个问题时就开始了。Here is my website。

现在，我的“工作”子菜单在悬停时打开，这在桌面上是可以的，但在767px以下的移动屏幕上，我的导航菜单变成了一个由这个jQuery功能操作的按钮，并且我的整个“工作”子菜单是打开的，列出了所有的东西，占用了很多空间：

代码语言：javascript
复制
(function($){
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
  menu.removeClass('open');
} else {
  menu.addClass('open');
}
       });
    });
;

当我从this post添加这段代码时，手机上的整个菜单按钮都消失了，没有什么可以点击的：

代码语言：javascript
复制
$(function() {
$('#cssmenu > li').click(function(e) { // limit click to children of mainmenu
    var $el = $('ul',this); // element to toggle
    $('#cssmenu > li > ul').not($el).slideUp(); // slide up other elements
    $el.stop(true, true).slideToggle(400); // toggle element
    return false;
});
$('#cssmenu > li > ul > li').click(function(e) {
    e.stopPropagation();  // stop events from bubbling from sub menu clicks
});
});​

我尝试了几个不同的方法，比如this one，它也会使按钮消失，并且似乎与jQuery按钮代码冲突。

这个PHP似乎定义了导航类：

代码语言：javascript
复制
<?php
            wp_nav_menu(array(
             'container_id' => 'cssmenu',
             'theme_location' => 'menu-1',
             'fallback_cb'       => 'gusto_photography_Menu_Walker::fallback',
             'walker' => new Gusto_Photography_Menu_Walker(),
            ));
        ?>

对应的CSS如下：

代码语言：javascript
复制
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#cssmenu {
  background: transparent;
  margin: 0;
  width: auto;
  padding: 0;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

#cssmenu ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  float: none;
  text-align: left;
  padding-top: 15px;
}

#cssmenu ul:after,
#cssmenu:after {
  content: ' ';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

#cssmenu a {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

#cssmenu ul li {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;

}

#cssmenu ul li a {
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  margin: 0;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

#cssmenu ul li a {
display: inline-block;
}
#cssmenu ul li a:after {
content: '';
display: block;
height: 2px;
width: 0;
margin: 10px 0 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#cssmenu ul li a:hover:after {
width: 100%;
background: #000;
}


#cssmenu ul li ul {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 9999;
}

#cssmenu ul li ul li {
  max-height: 0;
  position: absolute;
  -webkit-transition: max-height 0.4s ease-out;
  -moz-transition: max-height 0.4s ease-out;
  -ms-transition: max-height 0.4s ease-out;
  -o-transition: max-height 0.4s ease-out;
  transition: max-height 0.4s ease-out;
  background: #ffffff;
}

#cssmenu ul li ul li.has-sub:after {
  display: block;
  position: absolute;
  content: '';
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #000000;
  z-index: 1;
  top: 13px;
  right: 15px;
}

#cssmenu.align-right ul li ul li.has-sub:after {
  right: auto;
  left: 15px;
}

#cssmenu ul li ul li.has-sub:before {
  display: block;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  border: 3px solid transparent;
  border-left-color: #ffffff;
  z-index: 2;
  top: 15px;
  right: 15px;
}

#cssmenu.align-right ul li ul li.has-sub:before {
  right: auto;
  left: 15px;
  border-left-color: transparent;
  border-right-color: #ffffff;
}

#cssmenu ul li ul li a {
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  color: #000000;
  letter-spacing: 0;
  display: block;
  width: 170px;
  padding: 7px 7px 7px 7px;
  text-align: left;
}

#cssmenu ul li ul li:hover>a,
#cssmenu ul li ul li.active>a {
  color: #777;
}

#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
  background: #eee;
}

#cssmenu ul li ul li:hover>ul {
  left: 100%;
  top: 0;
}

#cssmenu ul li ul li:hover>ul>li {
  max-height: 72px;
  position: relative;
}

#cssmenu>ul>li {
  display: block;
}

#cssmenu.align-center>ul>li {
  float: none;
  display: inline-block;
}

#cssmenu.align-center>ul {
  text-align: center;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right>ul {
  float: right;
}

#cssmenu.align-right>ul>li:hover>ul {
  left: auto;
  right: 0;
}

#cssmenu.align-right ul ul li:hover>ul {
  right: 100%;
  left: auto;
}

#cssmenu.align-right ul ul li a {
  text-align: right;
}

#cssmenu>ul>li:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  top: 0;
  z-index: 0;
  border-bottom: 0px solid #000;
  background: transparent;
  -webkit-transition: border-bottom .2s;
  -moz-transition: border-bottom .2s;
  -ms-transition: border-bottom .2s;
  -o-transition: border-bottom .2s;
  transition: border-bottom .2s;
}

#cssmenu>ul>li.has-sub>a {
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 10px;
}

#cssmenu>ul>li.has-sub>a:after {
  display: block;
  content: '';
  background: #ffffff;
  height: 2px;
  width: 12px;
  margin: 10px 0 0;
  position: absolute;
  border-radius: 13px;
  right: 0px;
  left: 47px;
  top: 18px;
}

#cssmenu>ul>li.has-sub>a:before {
  display: block;
  content: '';
  border: 4px solid transparent;
  border-top-color: #000;
  z-index: 2;
  height: 0;
  width: 0;
  position: absolute;
  right: 0px;
  left: 47px;
  top: 18px;
}

#cssmenu>ul>li>a {
  color: #000;
  padding:15px 15px 0;
  padding-left: 0;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  z-index: 2;
  position: relative;
}

#cssmenu>ul>li:hover:after,
#cssmenu>ul>li.active:after {
  height: 100%;
}

#cssmenu>ul>li:hover>a {
  color: #000;
}
#cssmenu>ul>li.active>a {
}

#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li.active>a:after {
}

#cssmenu>ul>li:hover>a:before,
#cssmenu>ul>li.active>a:before {
  border-top-color: #eee;
}

#cssmenu>ul>li:hover>ul {
  left: 0;
}

#cssmenu>ul>li:hover>ul>li {
  max-height: 72px;
  position: relative;
}

#cssmenu #menu-button {
  display: none;
}

#cssmenu>ul>li>a {
  width: auto;
  display: inline-block;
}

#cssmenu>ul>li {
  width: auto;
}

#cssmenu>ul>li>ul {
  width: 170px;
  display: block;
}

#cssmenu>ul>li>ul>li {
  width: 170px;
  display: block;
}
.main-navigation {
    margin-bottom: 0em;
}

@media all and (max-width: 767px),
 {
  #cssmenu>ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease-out;
    -moz-transition: max-height 0.35s ease-out;
    -ms-transition: max-height 0.35s ease-out;
    -o-transition: max-height 0.35s ease-out;
    transition: max-height 0.35s ease-out;
  }
  #cssmenu>ul>li>ul {
    width: 100%;
    display: block;
  }
  #cssmenu.align-right ul li a {
    text-align: left;
  }
  #cssmenu>ul>li>ul>li {
    width: 100%;
    display: block;
  }
  #cssmenu.align-right ul ul li a {
    text-align: left;
  }
  #cssmenu>ul>li>ul>li>a {
    width: 100%;
    display: block;
  }
  #cssmenu ul li ul li a {
    width: 100%;
  }
  #cssmenu.align-center>ul {
    text-align: left;
  }
  #cssmenu.align-center>ul>li {
    display: block;
  }
  #cssmenu>ul.open {
    max-height: 1000px;
    border-top: 0px solid rgba(110, 110, 110, 0.25);
  }
  #cssmenu ul {
    width: 100%;
  }
  #cssmenu ul>li {
    float: none;
    width: 100%;
  }
  #cssmenu ul li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 20%;
    margin-left: 40%;
    margin-right: 40%;
    padding: 6px;
    text-align: center;
  }
  #cssmenu ul>li:after {
    display: none;
  }
  #cssmenu ul li.has-sub>a:after,
  #cssmenu ul li.has-sub>a:before,
  #cssmenu ul li ul li.has-sub:after,
  #cssmenu ul li ul li.has-sub:before {
    display: none;
  }
  #cssmenu ul li ul,
  #cssmenu ul li ul li ul,
  #cssmenu ul li ul li:hover>ul,
  #cssmenu.align-right ul li ul,
  #cssmenu.align-right ul li ul li ul,
  #cssmenu.align-right ul li ul li:hover>ul {
    left: 0;
    position: relative;
    right: auto;
  }
  #cssmenu ul li ul li,
  #cssmenu ul li:hover>ul>li {
    max-height: 999px;
    position: relative;
    background: none;
  }
  #cssmenu ul li ul li a {
    padding: 8px 20px 8px 35px;
    color: #333;
  }
  #cssmenu ul li ul ul li a {
    padding: 8px 20px 8px 50px;
  }
  #cssmenu ul li ul li:hover>a {
    color: #000000;
  }
  #cssmenu #menu-button {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 20%;
    margin-left: 40%;
    margin-right: 40%;
    margin-top: 20px;
    padding: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #000;
    cursor: pointer;
    border: 2px solid #000;
  }
  #cssmenu #menu-button:after {
    display: none;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #000;
    right: 20px;
    top: 16px;
  }
  #cssmenu #menu-button:before {
    display: none;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #000;
    right: 20px;
    top: 26px;
  }
}

我不确定为什么我添加的jQuery根本不会影响它在子菜单中。谢谢你的帮助。

jquery
html
css
javascript
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-15 03:53:53

您可以尝试将“work”li项中的ul作为目标，并使用display:none将其隐藏。然后单击work li，您可以添加和删除一个类，例如class="open"，以使用jQuery关闭或打开子菜单。

代码语言：javascript
复制
<ul class="menu">
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
   <li class="has-children">Click me!
    <ul class="submenu">
     <li>list item</li>
     <li>list item</li>
     <li>list item</li>
    </ul>
  </li>
 <li>list item</li>
 <li>list item</li>  
</ul>

CSS应该是这样的：

代码语言：javascript
复制
.menu {
  .has-children {
    color: red;
    cursor:pointer;
      &.open {
      .submenu {
        display:block;
      }
     }
    }
    & :nth-child(4n) {
     ul {
      display:none;
     }
   }
 }

和jQuery类似的东西：

代码语言：javascript
复制
$( document ).ready(function() {
  $('.has-children').on('click', function(){

  if ($('.has-children').hasClass('open')) {
     $(this).removeClass('open');
   } else {
      $(this).addClass('open');
   }
  });  
});

如果你看到它在工作，那就更有意义了。

我在下面的链接中提供了一个工作示例：https://codepen.io/Angel-SG/pen/JwXRZo

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/53785628

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档