[英]How to change prepended text when toggled in Jquery?
I have some content that I am show/hiding using the Jquery toggle function. 我有一些使用Jquery切换功能显示/隐藏的内容。
I have prepended an arrow to each heading and would like to change the prepended arrow to a downwards arrow when the content is toggled. 我已在每个标题前添加了一个箭头,并希望在切换内容时将其更改为向下箭头。
Code so far: 到目前为止的代码:
$(document).ready(function(){
$('.show-hide-list h3 a').prepend('> ');//Prepend arrow
$('.show-hide-list li .show-hide-list-content').hide();//Hide content
$('.show-hide-list h3').click(function() {//Perform toggle when clicked
$(this).next('.show-hide-list-content').toggle();
//Need to change orientation of prepended arrow when toggled
return false;
});
});
The html is as follows: html如下:
<ul class="show-hide-list">
<li>
<h3><a href="#">Heading</a></h3>
<div class="show-hide-list-content">
Content to be toggled here.
</div>
</li>
</ul>
How can I change the arrow orientation once toggled? 切换后如何更改箭头方向?
Wrap your arrow in a span tag so you can easily select it. 将您的箭头包裹在一个span标签中,以便您轻松选择它。
$(document).ready(function(){
$('.show-hide-list h3 a').prepend('<span>> </span>');//Prepend arrow
$('.show-hide-list li .show-hide-list-content').hide();//Hide content
$('.show-hide-list h3').click(function() {//Perform toggle when clicked
$(this).next('.show-hide-list-content').toggle();
var arrow = $(this).find('span');
if (arrow.text().indexOf('V') >= 0) {
arrow.html('> ');
} else {
arrow.html('V ');
}
//Need to change orientation of prepended arrow when toggled
return false;
});
});
You could apply a class to that arrow, assuming your users' browsers would support it. 您可以将一个类应用于该箭头,前提是您的用户的浏览器将支持该箭头。 Start with some some CSS like this:
从这样的一些CSS开始:
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
Or just toggle a downward arrow image's visibility, which would work on any modern browser. 或者,只需切换向下箭头图像的可见性,即可在任何现代浏览器上使用。
Just put the arrow in a <span>
and give it a proper class, so you can find it again later: For example like this: 只需将箭头放在
<span>
并为其指定适当的类,以便稍后可以再次找到它:例如,如下所示:
$(document).ready(function(){
$('.show-hide-list h3 a').prepend('<span class="togglearrow">> </span>');
//Prepend arrow
$('.show-hide-list li .show-hide-list-content').hide();//Hide content
$('.show-hide-list h3').click(function() {//Perform toggle when clicked
$(this).next('.show-hide-list-content').toggle();
$(this).parent().find('.togglearrow').html('V ');
//V represents downward arrow
//Need to change orientation of prepended arrow when toggled
return false;
});
});
Instead of using prepend
I would recommend using the :before
pseduo selector or a background-image
to create the arrows. 我建议不要使用
:before
pseduo选择器或background-image
来创建箭头,而不要使用prepend
。 This is a presentational thing so it really should be handled by CSS. 这是一个呈现性的内容,因此实际上应该由CSS处理。
Live, functional example using the :before
pseduo selector - http://jsfiddle.net/Nfw7y/ 使用
:before
pseduo选择器的实时功能示例 -http: //jsfiddle.net/Nfw7y/
If you need more control over the look of the arrows I would recommend using a background-image
or an icon font . 如果您需要更多控制箭头的外观,建议使用
background-image
或图标字体 。
你可以简单地拥有
$('.show-hide-list h3 a').html( $('.show-hide-list h3 a').html().replace('>', 'V') );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.