javascript - 单击功能替换div id

Question

Javascript:

$('nav').before('<div id="box">Open</div>');
$('#box').append('<div class="line"></div>');

$('#box').click(function(event) 
{
    $('nav').animate({height:'toggle'},200);
}

CSS:

#box {
    background: white;
    border: green;
    padding: 7px;
    width: 20px;
}  

我想在单击框时将框背景颜色更改为黄色。如何将此 css 添加到其中。

#box {
    background: yellow !important;
}  

Answer 1

解决方案一:

在 jQuery 中使用 .css() 实现:

$('#box').click(function(event) 
{
  $(this).css('background-color', 'yellow');
  $('nav').animate({height:'toggle'},200);  
}

Learn about .css() in jQuery

---

解决方案 2:

您也可以在 jQuery 和一些 CSS 中使用 .addClass() 来做到这一点:

$('#box').click(function(event) 
{
  $(this).addClass('yellowify');
  $('nav').animate({height:'toggle'},200);  
}

CSS:

.yellowify{
  background-color: yellow;
}

Learn about .addClass() in jQuery