Question

我有一个很棒的'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/

Answer 1

以下是我在使用手风琴

时的实现方法

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

DEMO http://jsfiddle.net/kevinPHPkevin/mZhTY/107/

<强> EDITED

只需将toggleClass更改为addClass

即可

DEMO http://jsfiddle.net/kevinPHPkevin/mZhTY/108/

Answer 2

我会用一个简单的click function来完成。

<强> Working Example

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

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

.newClass {
    color:red;
}

Answer 3

我对访问的有蓝绿色有问题，不应该覆盖

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

示例

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

-- 用于 Ontraport 页面

我不能使用jQuery UI手风琴选项卡改变颜色（如：a：visited），我可以吗？

3 个答案: