Question

我有一些内容，我使用Jquery切换功能显示/隐藏。

我已经为每个标题添加了一个箭头，并希望在内容切换时将前置箭头更改为向下箭头。

到目前为止

代码：

$(document).ready(function(){
    $('.show-hide-list h3 a').prepend('&gt;&nbsp;');//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;
    });
});

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>

如何在切换后更改箭头方向？

Answer 1

将箭头包裹在span标记中，以便您轻松选择它。

$(document).ready(function(){
    $('.show-hide-list h3 a').prepend('<span>&gt;&nbsp;</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('&gt;&nbsp;');  
        } else {
            arrow.html('V&nbsp;');
        }
        //Need to change orientation of prepended arrow when toggled
        return false;
    });
});

http://jsfiddle.net/6DB7t/1/

Answer 2

您可以将该类应用于该箭头，假设您的用户的浏览器会支持它。从这样的一些CSS开始：

-webkit-transform: rotate(-270deg); 
-moz-transform: rotate(-270deg);

或者只是切换向下箭头图像的可见性，这可以在任何现代浏览器上使用。

Answer 3

只需将箭头放在<span>中并给它一个合适的类，以便稍后再找到它：例如：

$(document).ready(function(){

$('.show-hide-list h3 a').prepend('<span class="togglearrow">&gt;&nbsp;</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;
});

});

Answer 4

我建议您使用prepend pseduo选择器或:before来创建箭头，而不是使用background-image。这是一个表达性的东西，所以它确实应该由CSS处理。

使用:before pseduo选择器

实时，功能性示例 - http://jsfiddle.net/Nfw7y/

如果您需要更多地控制箭头的外观，我建议您使用background-image或icon font。

Answer 5

你可以简单地拥有

$('.show-hide-list h3 a').html( $('.show-hide-list h3 a').html().replace('&gt;', 'V') );

如何在Jquery中切换时更改前置文本？

5 个答案: