单击css时如何更改符号？

Question

如何将符号更改为＆＃34; V＆＃34;单击小部件标题后，单击后面小部件标题将更改符号＆＃34;＆gt;＆＃34;。

点击前的

图片：link

这是我在小部件标题后添加的css。

.widgettitle a::after {
    content: " >";
        font-size:16px;
        color:#d3db2c!important;
}

Answer 1

	   $(".greater").click(function(){
var test = $( this ).hasClass( "greater" );


if(test){
$( this ).removeClass( "greater" );   
  $( this ).addClass( "less" );   
}else{
  $( this ).removeClass( "less" );   
  $( this ).addClass( "greater" );   
  
}
});

.widgettitle .greater::after {
	content: " >";
	font-size:16px;
	color:#d3db2c!important;
}

.widgettitle .less::after {
	content: " v";
	font-size:16px;
	color:#d3db2c!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="widgettitle">
	<a href="#" class="greater">test</a>
</div>

Answer 2

单击:active

时，

a表示

.widgettitle a::after {
    content: " ►";
}
.widgettitle a:active::after {
    content: " ▼";
        font-size:16px;
        color:black!important;
}

<div class="widgettitle">
<a href="#">back</a>
</div>

发表评论

  

单击后可以保持▼，然后单击后退将更改   回到►

使用切换类

.widgettitle a::after {
    content: " ►";
}
.widgettitle .toggle::after {
    content: " ▼";
        font-size:16px;
        color:black!important;
}

<div class="widgettitle">
<a href="#" onclick="this.classList.toggle('toggle');">back</a>
</div>

Answer 3

您必须使用复选框黑客来实现纯CSS：

＆＃13;

＆＃13;

.link {
  text-decoration: none;
}
.checkbox {
  display: none;
}

.link:after {
  content: '►';
  margin-left: 5px;
  display: inline-block;
}

.checkbox:checked ~ .link:after {
  transform: rotate(90deg);
}

＆＃13;

<div class="link-container">
    <label for="checkbox-1">Click me</label>
    <input type="checkbox" id="checkbox-1" class="checkbox">
    <a href="#" class="link"></a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用JavaScript的另一种解决方案。希望它的帮助。

.widgettitle a::after {
    	content: " >";
    	font-size:16px;
    	color:#d3db2c!important;
    }

    .newclass a:focus::after {
       content: "v";
    }

<div id="wg" class="widgettitle">
    	<a id="aid" href="#">test</a>
</div>

<script>

var aid = document.getElementById("aid");
var wg = document.getElementById("wg");
aid.onclick = function(){
 wg.classList.toggle("newclass");
}

</script>