Question

当我点击其他div toggle-btn时，我试图在两个不同的类之间添加和更改toggle-nav的类。

首次点击时我需要使用fadeInDown类，使用Jquery再次点击div时需要fadeUpOut

这是我的代码

    <script>
$(document).ready(function()
{   
    $('.toggle-btn').click( function() {
    $(".toggle-nav").toggleClass("fadeInDown ");

    });
    });


</script>

<div class="container">
<label class="toggle-btn" for="menu-toggle">
<i class="fa fa-bars fa-4x"></i>
<span>MENU</span>
</label>
</div>  

    <input type="checkbox" id="menu-toggle"/>

    <div id="toggle-bar" class="toggle-nav animated clearfix">
        <div class="container">
            <div class="nav-sections">
                <div class="col-md-4 top-nav-1">item1</div>
                <div class="col-md-3 top-nav-2">item2</div>
                <div class="col-md-2 top-nav-3">item3</div>
                <div class="col-md-3 top-nav-4">item4</div>
             </div>
        </div>
     </div>

任何帮助都会很棒！

谢谢！

-Issac

Answer 1

见jsfiddle。但是如果要显示菜单（如nav-visible）并且默认情况下隐藏它，那么添加一个类就不容易了：

.toggle-nav {
  height:0;
  transition: 2s height;
  overflow:hidden;
}
#menu-toggle{
  display:none;
}
.toggle-nav.fadeInDown {
  height:100px;
}

See this jsfiddle.

单击div时如何在2个类之间进行更改

1 个答案: