点击按钮删除/添加课程 [英] Remove/add class on click of a button

问题描述

我希望能够从一个div中删除一个类并在点击一个按钮时添加另一个类。但我无法实现它。

 < div class =hiddennav displaynone> 
< ul> 
<？php wp_nav_menu（array（'menu'=>'Main Nav menu'））; ？> 
< / ul> 
< / div> <！ -  end div hiddennav  - > 
< div class =fixednav> 
< div class =shownav>< a href =＃class =shownavbutton>< / a>< / div> 
<！ -  end div shownav  - > 
< / div> <！ -  end div fixednav  - > 
  

这里是jQuery：

  $（document）.ready（function（）{
 $（。shownavbutton）。click（function（）{
 $（。hiddennav）。removeClass displaynone）。addClass（displayblock）; 
}）; 
  

'I' d最好是希望它在多次点击时也切换类。试试 $（选择器） .toggleClass（class）：

  $（document）.ready（function（）{
 $（。shownavbutton）。click（function（）{
 $（。hiddennav）。toggleClass（displaynone）。toggleClass（displayblock）; 
}）; 
 $ b）; 
  

另外，你也可以使用CSS方法（假设这是所有您通过 displaynone 和 displayblock 类完成）：

  $（。hiddennav）。toggle（function（）{
 $（this）.css（'display'，'none'）; 
} ，function（）{
 $（this）.css（'display'，'block'）; 
}）; 
  

I'd like to be able to remove one class from a div and add another upon the click of a button. But I can't get it to work.

<div class="hiddennav displaynone">
  <ul>
    <?php wp_nav_menu(array('menu' => 'Main Nav menu')); ?>
  </ul>
</div> <!-- end div hiddennav -->
<div class="fixednav">
  <div class="shownav"><a href="#" class="shownavbutton"></a></div>
  <!-- end div shownav -->
</div> <!-- end div fixednav -->

Here's the jQuery:

$(document).ready(function(){
  $(".shownavbutton").click(function() {
    $(".hiddennav").removeClass("displaynone").addClass("displayblock");
  });

I'd preferably want it to toggle the classes too when clicked multiple times.

解决方案

Try $(selector).toggleClass(class):

$(document).ready(function(){ 
    $(".shownavbutton").click(function() { 
        $(".hiddennav").toggleClass("displaynone").toggleClass("displayblock");
    });
});

Optionally, you could use the CSS method as well (assuming that this is all you're accomplishing via your displaynone and displayblock classes):

$(".hiddennav").toggle(function() {
    $(this).css('display','none');
}, function() {
    $(this).css('display','block');
});

这篇关于点击按钮删除/添加课程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！