javascript - Jquery mobile 和 toggleClass 使导航栏具有打开和关闭状态

Question

http://rickgutierrez.bol.ucla.edu/navbartest.html

这是我的基本 jquery 移动导航设置。我试图让前三个导航栏元素的功能更像是具有开和关状态的切换；单击该按钮，它会切换到其他状态(不影响其他按钮状态)，再次单击它，它会切换回来。当页面加载时，1 处于打开状态，由 .ui-btn-active 设置样式，2、3、4 处于关闭状态；我不太确定 jquery 移动 CSS 代码的哪一部分设置了关闭状态的样式。还有 ui-btn-up-a 和 ui-btn-down-a 我认为可能相关的样式。

经过一些研究，我遇到了几个 toggleClass 教程: http://api.jquery.com/toggleClass/

jquery 教程中的第一个演示最接近我正在寻找的具有独立功能的演示。该演示中的代码简单明了，这就是为什么我对无法在我的页面上运行感到沮丧。

谁能指点一下？我应该使用哪些类(class)？ toggleClass 是在 jquery 移动库中还是我需要添加指向最新 jquery 脚本的链接？

谢谢

Answer 1

我使用 JsBin 创建了一个代码。希望对您有所帮助:http://jsbin.com/exenov/4/edit

我添加了一个新类 (custom-btn-active)，我在 jQuery on click 函数中使用它。

您在 jquerymobile.css 文件中唯一应该做的就是删除原始的 .ui-btn-active css。因为我无法使用 jQuery 删除该类(我完全不知道为什么)

检查我的 Jsbin > 按钮在点击时保持绿色，再次点击时它会熄灭(不要注意蓝色背景，因为那是你需要删除的 .ui-btn-active)。