javascript - Removeadd class on click of a button - Stack Overflow

admin管理员组

文章数量:1334887

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.

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.

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 12, 2012 at 17:16 dda 6,21322 gold badges2727 silver badges3535 bronze badges asked Oct 12, 2012 at 17:12 andyandy 2,75488 gold badges4949 silver badges6363 bronze badges 2

• 4 you got far enough to add "want it to toggle the classes" , but not far enough to google "jQuery toggle class" because you'd find toggleClass() – Scott Selby Commented Oct 12, 2012 at 17:15
• 1 Looks like you're missing an extra }); to end the $(document).ready() function. – Marcus Commented Oct 12, 2012 at 17:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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 acplishing via your displaynone and displayblock classes):

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

Try this

 $(".hiddennav").toggleClass("displaynone displayblock");

本文标签： javascriptRemoveadd class on click of a buttonStack Overflow