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

标签 javascript jquery css jquery-mobile toggleclass

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 脚本的链接?

谢谢

最佳答案

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

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

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

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

关于javascript - Jquery mobile 和 toggleClass 使导航栏具有打开和关闭状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13028084/

相关文章:

javascript - CSS悬停效果有问题

javascript - 如何访问 Cypress 的 React 组件

c# - javascript函数中的查询字符串

javascript - 将 lodash 用于 MobX 存储

javascript - 如何删除没有值(value)的选项选择?

javascript - jQuery 菜单列表到面包屑

javascript - Bootstrap 日期选择器在 IE8 中没有响应

html - 显示一个 "empty" block

php - CakePHP 不输出正确的 CSS 路径

javascript - 用鼠标选择文本并突出显示该 div 中多次出现的相同文本