0

我有一个很好的 ol' vanilla jQuery UI 手风琴。我的客户询问手风琴选项卡（标题）上的文本是否会在阅读（访问）时改变颜色。虽然我可以将伪类:hover应用于任何元素，但据我研究表明，我只能应用于:visited元素<a>。

我已经对此进行了彻底的搜索，但根本没有提出任何关于该主题的内容。还是我只是问错了问题？我想可能有一种方法可以为此编写一些自定义 jQuery，但我只能使用 jQuery UI 手风琴小部件。所以问题只针对 jQuery UI 手风琴。我相信答案是否定的。

如果有人有想法，我将不胜感激。同样，这是针对已经访问过的手风琴选项卡（过去访问过，用户现在已经移动），而不是当前活动的手风琴选项卡。

这是我的标准手风琴标记。

<div id="accordion">
  <h3>Research</h3>
    <div>
      <p>Content Here</p>
    </div>
  <h3>Resources and Guides</h3>
    <div>
      <p>Content Here</p>
    </div>
  <h3>Regulations</h3>
    <div>
      <p>Content Here</p>
    </div>
</div>

这是我的普通旧 jQuery UI 手风琴脚本：

   jQuery('#accordion').accordion({
     collapsible: true, 
     active: false, 
     header: "h3", 
     heightStyle: "content"
   });

这是我为它制作的小提琴：http: //jsfiddle.net/Lera/UtE3C/

4

3 回答 3

2

这是我在使用手风琴时如何实现的

CSS：

.toggle-title:hover,
.toggle-title:active,
.active { /* Added .active rule */
    background: #000;
    color: white;
}

JS：

$(document).ready(function() {
    $(".toggle-content").hide();
    $(".toggle-title").click(function() {
        $(this).next(".toggle-content").slideToggle("normal");
        $(this).toggleClass('active'); //toggle class active
    });
});

演示http://jsfiddle.net/kevinPHPkevin/mZhTY/107/

已编辑

只需更改toggleClass为addClass

演示http://jsfiddle.net/kevinPHPkevin/mZhTY/108/

于 2013-07-23T19:47:14.067 回答
1

我会用一个简单的点击功能来做到这一点。

工作示例

$('#accordion').accordion({
    collapsible: true,
    active: false,
    header: "h3",
    heightStyle: "content"
});

$('#accordion h3').click(function () {
    $(this).addClass('newClass');
});

.newClass {
    color:red;
}
于 2013-07-23T20:28:29.113 回答
0

我对访问者的蓝绿色有疑问，它不应该被覆盖

即使您的点击事件正常，您的样式也可能会被覆盖。为了解决这个问题，在你的 CSS 类.read中，放在!important背景颜色的分号之前。例如background: #f00 !important;

例子

.accordion {
background-color: #eee !important;
}

-- 用于 Ontraport 页面

于 2021-07-25T08:24:07.243 回答