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

Posted 2023-04-13

【中文标题】在 Jquery 中切换时如何更改前置文本？

【英文标题】：How to change prepended text when toggled in Jquery?

【发布时间】：2012-05-23 14:09:58

【问题描述】：

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

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

到目前为止的代码：

$(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;
    );
);

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>

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

【参考方案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/

【参考方案2】：

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

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

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

【参考方案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;
);

);

【参考方案4】：

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

实时功能示例使用:before pseduo 选择器 - http://jsfiddle.net/Nfw7y/

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

【参考方案5】：

你可以简单地拥有

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