Question

我制作了我的平板电脑和移动菜单横向click。我将我的andchor元素显示为块元素，因为我希望我的li元素全屏显示，但是当我使用width:100%时它没有＆＃39;工作，我在这个论坛上问过，有些人告诉我，我需要将我的锚元素设置为display:block并从我的li元素中移除我的风格。它有效，但现在的问题是当你是在移动设备或平板电脑设备上，点击具有子菜单的菜单，它会将您重定向到页面而不是放下菜单。有人可以帮我解决这个问题。这是我的代码：

＆＃13;

/******************************************
             Tablet Menu Style
*******************************************/
.tablet-menu{
display:none;
background:#000;
position:fixed;
width:100%;
height:100%;
opacity:0.7;
z-index:1001;
  -webkit-transition: all 0.8s ease-in-out;
  -moz-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.tablet-menu.show{
display:block;
}
.tablet-menu ul{
position:relative;
width:100%;
text-align:center;
padding:0;
margin:0;
}
.tablet-menu li{
color:#FFF;
background:#000;
}
.tablet-menu li a{
text-transform: uppercase;
font-family: "Roboto Slab", Times, Georgia, serif;
font-weight:bold;
border-radius:2px;
border-bottom:1px solid white;
position:relative;
display:block;
padding-top:4%;
padding-bottom:4%;
}
.tablet-menu ul li ul{
display:none;
}
.tablet-menu li:hover ul, .tablet-menu li ul li ul {
display:block;
margin-left:20px;
margin-right:20px;
}
.tablet-menu li:last-child{
border:none;
}
.tablet-menu li > a:after{
content: "\33";
font-family: "ElegantIcons";
}
.tablet-menu li a:only-child:after, .tablet-menu li li a:after{
content:"";
}
/*
.tablet-menu li .sub-menu a:last-child:after{
content:"32";
}
*/
.tablet-menu li a:hover{
background:#fff;
color:#000;
}

＆＃13;

    <div class="tablet-menu">
     <ul class="tablet-menu-ul">
            <li>
             <a>test</a>
            </li>
            <li>
             <a></a>                                                                        <ul>
                 <li>
                  <a>test1</a>
                    <ul>
                      <li>
                    <a></a>
                      </li>
                    </ul>
                 </li>
               </ul>
            </li>
           </ul>
                <li>
                  <a>test2</a>
                </li>
                <li>
                  <a>test3</a>
                 <ul>
                  <li>
                    <a>test4</a>
                  </li>
                 </ul>
                 </li>
                </nav>
             </div>

＆＃13;

我希望当用户点击具有子菜单的元素时，显示该子菜单。如果您还需要更多信息，请在此处填写。编辑：我正在使用wordpress我认为我已经在这里重新编写了菜单代码，因为在wordpress中它只是PHP代码。

Answer 1

嗯，使用简单的CSS无法实现。您必须使用JS进行此操作并对HTML进行细微更改。

如果有孩子则插入
在has-child点击显示子菜单上使用JS，反之亦然。

确保您在处理event.preventDefault()点击事件时添加了has-child。

或

使用可以处理此类情况的第三方插件。这是我迄今为止最好的和平使用 - http://mmenu.frebsite.nl/

干杯！

Answer 2

我对我想要的东西做了一些接近，因为最终结果是jquery代码。

$('.mobile-menu li').click(function(ev) {
    if($(this).children('ul').is(':visible'))
        return true;
    if($(this).children('ul').toggle("slow").length)
        return false;
    ev.stopPropagation();
});

移动设备上的锚标签块属性

2 个答案: