切换 CSS Javascript 函数答案

【问题标题】：Toggle CSS Javascript Function切换 CSS Javascript 函数
【发布时间】：2012-02-15 22:32:12
【问题描述】：

我试图在第一次单击时显示此 CSS，并在下一次单击时将其删除，但 toggleClass 似乎不起作用，下面的代码也不起作用。我能得到的只是要显示的 CSS，它永远不会被删除。这适用于 iOS 上的 Safari。感谢您的帮助！

                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');
                    }
                });

【问题讨论】：

你不需要在if/else 中为变量menu_enabled 加上var 开头，你已经声明了它。你能用JS Fiddle 演示重现这个问题吗？

标签： javascript jquery ios safari toggleclass

【解决方案1】：

您应该结帐.toggleClass()，看起来这正是您想要的。

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

【讨论】：

我意识到他没有准确解释发生了什么（如果有的话），但他确实明确指出 toggleClass() 不起作用。（我同意它应该，但是这个断言表明他在他的代码的其他地方遇到了问题，而不是他错过了一个特定的 jQuery 方法的可能性。
已经尝试过 toggleClass，就像我上面说的，不会删除我正在使用的 iPad 上的类。
好的，那是你的问题，iOS 上 Safari 的跨浏览器问题
@Jason：你怎么知道的？
@duality_ 我试图让它发挥作用。由于某种原因，ios无法处理它。把它归结为另一个苹果虫

【解决方案2】：

也许使用 .className 属性？

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';
 }
});

【讨论】：

.className 适用于 iOS、Safari（我刚刚在 iPhone 上测试过）。我相信问题出在jQuery上。您是否考虑过为锚设置一个 id，然后通过 document.getElementById 定位它，并使锚的 onclick 调用一个 javascript 函数？这可能看起来像是过度设计，但如果库不可用，那么您将不得不推出自己的实现。
感谢您的帮助。不幸的是，我不能使用那个 onclick 方法，但我很欣赏这个好主意。
您是否考虑过使用<button> 代替锚点？

【解决方案3】：

我不完全确定您想要完成的总体目标是什么，但 addClass 和 removeClass 应该可以正常工作。我会向您希望附加点击的元素添加一个 ID 或类，但这只是个人喜好。

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

【讨论】：