首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何将子菜单添加到此响应菜单中?

如何将子菜单添加到此响应菜单中?
EN

Stack Overflow用户
提问于 2015-06-24 06:07:37
回答 3查看 822关注 0票数 0

我有这个响应的navigation.But,我不能添加多级子菜单到这个导航。如何将多级子菜单添加到此responsive navigation link

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-06-24 06:38:41

已经做了一些改变

我更新了小提琴,SubItems也在切换。

注意:必须对CSS进行更改,以实现功能。

用于桌面

您可以编写以下脚本,无论您想要什么宽度,

代码语言:javascript
运行
复制
 if($(window).width()>"760")  {
    $("ul.main li").on("click",function(){
       if($(this).closest("li").children("ul").length) {  if($(this).hasClass("subOpen")){  
         $(this).removeClass("subOpen");
         $(this).find("ul.submenu").hide(300);
       }
       else {                                                 
       $(this).addClass("subOpen");
       $(this).find("ul.submenu").show(300);
       }
                                                       }
       });
    }

移动版

代码语言:javascript
运行
复制
//MENU TOGGLE FUNCTION
     $('.rmm-button').click(function(){
            // $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
                if ( $(this).is(".rmm-closed")) {
                    alert($(this).parent().parent().html());
                     $(this).parent().parent().find("ul.main").show(300);
                     $(this).removeClass("rmm-closed");
                }
                else {
                    alert($(this).html());
                    $(this).find('ul').stop().hide(300);
                     $(this).addClass("rmm-closed");
                }

            }); 

//SUBMENU TOGGLE FUNCTION
  $(".rmm-toggled ul li").on("click",function(){
     if($(this).closest("li").children("ul").length) {
           if($(this).hasClass("subOpen")){
           $(this).removeClass("subOpen");
           $(this).find("ul.submenu").hide(300);
         }
         else{
         $(this).addClass("subOpen");
         $(this).find("ul.submenu").show(300);
         }


     }

Here's Fiddle

票数 3
EN

Stack Overflow用户

发布于 2015-06-24 06:18:12

我想你用的是http://responsivemobilemenu.com/en/。它仍然不应该有这样的功能。他们很清楚地在他们的网站上写了下来。有了一些严肃的代码,黑客可能会给你一个解决方案。否则,有足够的好插件来满足您的需求。

票数 1
EN

Stack Overflow用户

发布于 2015-06-24 06:13:25

如果要添加子菜单,请在ul中放置一个新的li标记。

代码语言:javascript
运行
复制
<ul class="menu">
    <li><a href='#home'>Home</a></li>
    <li>
        <a href='#about-me'>About me</a>
        <ul class="submenu">
            <li><a href='#'>SubItem</a></li>
        </ul>
    </li>
    ...
</ul>

然后,使用一些CSS和JS代码,您可以创建一个很好的响应菜单。

CSS

代码语言:javascript
运行
复制
.submenu {
    display: none;
}

JS

代码语言:javascript
运行
复制
$('.menu > li').hover(function() {
   // Show submenu
   $(this).find('> ul.submenu').show();
}, function() {
   // Hide submenu
   $(this).find('> ul.submenu').hide();
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31018824

复制
相关文章

相似问题

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