切换CSS Javascript函数

Question

I'm trying to show this CSS on the first click and remove it on the next but toggleClass doesnt seem to work and neither does my code below. All I can get is the CSS to show and it never gets removed. This is for use on Safari on iOS. Thanks for the help!

                var menu_enabled = false;

                $('#nav a').click(function () {
                    if (menu_enabled == true) {
                        $(this).removeClass('sf-js-enabled');
                        var menu_enabled = false;
                    }
                    else {
                        var menu_enabled = true;
                        $(this).addClass('sf-js-enabled');
                    }
                });

Answer 1

You should checkout .toggleClass() , looks like it's exactly what you're wanting.

$('#nav a').click(function () {
    $(this).toggleClass('sf-js-enabled');
});

Answer 2

Perhaps using the .className attribute?

var menu_enabled = false;

$('#nav a').click(function () {
 if (menu_enabled == true) {
  $(this).className = "";
  menu_enabled = false;
 }else 
 {
  menu_enabled = true;
  $(this).className = 'sf-js-enabled';
 }
});

Answer 3

I'm not exactly sure what you're trying to accomplish overall, but addClass and removeClass should work just fine. I would add an ID or class to the element that you want to have the click attached to but that's just a personal preference.

$(document).ready(function(){
    $('#element').click(function(){
        if($('#element').hasClass('sf-js-enabled')){
            $('#element').removeClass();
        }
        else{
            $('#element').addClass('sf-is-enabled');
        }
    });
});