Question

我有一种情况，我有点卡住，我需要一些帮助。让我用一些代码解释一下自己。我有以下HTML设置：

<button type="button" class="navbar-toggle collapsed"></button>
<div class="collapse navbar-collapse" tabindex="-1">
    <div class="nav navbar-nav" tabindex="-1">
         <div class="menuitem_wrapper" tabindex="-1">
              <a href="#" class="">Menu 1</a>
              <div class="dropdown-menu" tabindex="-1">
                  <a href="#">Sub 1.1</a>
                  <a href="#">Sub 1.2</a>
              </div>
         </div>
         <div class="menuitem_wrapper" tabindex="-1">
              <a href="#" class="">Menu 2</a>
              <div class="dropdown-menu" tabindex="-1">
                  <a href="#">Sub 2.1</a>
                  <a href="#">Sub 2.2</a>
              </div>
         </div>
     </div>
</div>

我使用jQuery构建了一些功能：

$(document).ready(function() {

    $(".collapsed").click(function() {
        $(".navbar-collapse").toggleClass('show-menu'); 
        $(".menuitem_wrapper").removeClass('menuitem_wrapper').addClass('menuitem_wrapper_mobile');
    });

    $(".menuitem_wrapper").click(function() {           
        $(this).find(".dropdown-menu").removeClass('dropdown-menu').addClass('dropdown-menu-mobile');       
    });

});

每当按下切换按钮时，功能都会触发超链接：菜单1和菜单2显示（子项通过CSS隐藏）。

我不完全理解的第一部分是为什么这样做：

$(".menuitem_wrapper").click(function() {           
    $(this).find(".dropdown-menu").removeClass('dropdown-menu').addClass('dropdown-menu-mobile');       
});

为什么不这样做：

$(".menuitem_wrapper_mobile").click(function() {            
    $(this).find(".dropdown-menu").removeClass('dropdown-menu').addClass('dropdown-menu-mobile');       
});

但我遇到的主要问题是每当我按下超链接时：菜单1或菜单2显示子菜单。但我想创建具有切换效果的功能。

创建此代码的难点在于我无法手动向div添加任何CSS类。因为此菜单有两种使用方式。作为垂直呈现给用户的移动菜单，以及作为与悬停效果水平呈现的默认菜单。

任何人都可以帮助我获得所需的效果，切换，不用必须在我的HTML代码中添加类。

JSFIDDLE OVER HERE

Answer 1

<强>的Javascript

$(document).ready(function() {

    $(".collapsed").click(function() {
        $(".navbar-collapse").toggleClass('show-menu'); 
        $(".menuitem_wrapper").removeClass('menuitem_wrapper').addClass('menuitem_wrapper_mobile');
    });

    $(".menuitem_wrapper a:first-child").click(function() {         
        $(this).parent().children("div").toggleClass('dropdown-menu dropdown-menu-mobile');     
    });

});

Fiddle

Answer 2

而不是.removeclass或.addclass你可以使用.toggle或.toggleClass（＆＃34; active＆＃34;）

$( "" ).click(function() {
  $(this).toggle();
});

$("").click(function(){
  $(this).toggleClass("active");
});

你可以添加＆＃34;慢＆＃34;切换功能或其他一些转换，使其看起来像是平滑下拉而不是自动显示下拉菜单。您应该将Menu1和Menu 2包装在li标签而不是标签中。菜单1和菜单2没有功能的原因是因为您不在代码中的任何位置为菜单和菜单2提供功能，您只需将其包装在标签上。

在生成的切换元素

2 个答案: