Question

我目前使用此代码隐藏和显示div：

<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>

jQuery的：

$(document).ready(function() {
    $('#showmenu').click(function() {
            $('.menu').slideToggle("fast");
    });
});

点击div＆＃34;点击此处＆＃34; id =＆＃34; showmenu＆＃34;，我想添加课程＆＃34; active＆＃34;到这个div。

我怎样才能做到这一点？

Answer 1

您可以使用toggleClass：

$('#showmenu').click(function() {
    $( this ).toggleClass("active");
    $('.menu').slideToggle("fast");
});

Answer 2

使用addClass()之类的

$(document).ready(function() {
    $('#showmenu').click(function() {
            $(this).addClass('active');
            $('.menu').slideToggle("fast");
    });
});

＆＃13;

$(document).ready(function() {
    $('#showmenu').click(function() {
            $(this).addClass('active');
            $('.menu').slideToggle("fast");
    });
});

＆＃13;

.active{
  color:green;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>

＆＃13;

＆＃13; 要在每次点击时添加/删除课程，请使用toggleClass()

$(document).ready(function() {
    $('#showmenu').click(function() {
            $(this).toggleClass('active');
            $('.menu').slideToggle("fast");
    });
});

＆＃13;

$(document).ready(function() {
    $('#showmenu').click(function() {
            $(this).toggleClass('active');
            $('.menu').slideToggle("fast");
    });
});

＆＃13;

.active{
  color:green;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>

＆＃13;

包含li class =“active”的jquery open div

2 个答案: