0

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>

一度切り替えた矢印の向きを変更するにはどうすればよいですか?

4

5 に答える 5

2

簡単に選択できるように、矢印を 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/

于 2012-05-23T14:21:34.873 に答える
1

ユーザーのブラウザーがそれをサポートすると仮定すると、その矢印にクラスを適用できます。次のような CSS から始めます。

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

または、最新のブラウザーで機能する下向き矢印の画像の表示を切り替えるだけです。

于 2012-05-23T14:22:49.173 に答える
0

を使用する代わりに、擬似セレクターまたは aを使用して矢印を作成するprependことをお勧めします。これは表示上のものなので、実際には CSS で処理する必要があります。:beforebackground-image

:before擬似セレクターを使用した実際の機能例- http://jsfiddle.net/Nfw7y/

矢印の外観をより細かく制御する必要がある場合は、background-imageまたはアイコン フォントを使用することをお勧めします。

于 2012-05-23T14:22:24.500 に答える
0

あなたは単に持つことができます

$('.show-hide-list h3 a').html( $('.show-hide-list h3 a').html().replace('&gt;', 'V') );
于 2012-05-23T14:26:24.967 に答える
0

矢印を a に入れて<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;
});

});
于 2012-05-23T14:21:13.903 に答える