0

そのため、メニューのテキストを変更しながら、ページ上の特定の div を表示および非表示にするメニュー要素を作成しようとしています。少し検索した後、ほとんどの部分でうまくいきました（ただし、コードが少しぎこちないことは知っています）：

$(document).ready(function(){
            $('.section[id="option1"]').click(function(){
                    $(this).text($(this).text() == 'OPTION1' ? 'OPTION1 >>' : 'OPTION1');
                    $('.blurb').not('.blurb[id="option1"]').hide();
                    $('.blurb[id="option1"]').slideToggle();
                });
            $('.section[id="option2"]').click(function(){
                    $(this).text($(this).text() == 'OPTION2' ? 'OPTION2 >>' : 'OPTION2');
                    $('.blurb').not('.blurb[id="option2"]').hide();
                    $('.blurb[id="option2"]').slideToggle();
                });
            $('.section[id="option3"]').click(function(){
                    $(this).text($(this).text() == 'OPTION3' ? 'OPTION3 >>' : 'OPTION3');
                    $('.blurb').not('.blurb[id="option3"]').hide();
                    $('.blurb[id="option3"]').slideToggle();
                });
            $('.section[id="option4"]').click(function(){
                    $(this).text($(this).text() == 'OPTION4' ? 'OPTION4 >>' : 'OPTION4');
                    $('.blurb').not('.blurb[id="option4"]').hide();
                    $('.blurb[id="option4"]').slideToggle();
                });
            $('.section[id="option5"]').click(function(){
                    $(this).text($(this).text() == 'OPTION5' ? 'OPTION5 >>' : 'OPTION5');
                    $('.blurb').not('.blurb[id="option5"]').hide();
                    $('.blurb[id="option5"]').slideToggle();
                });
            $('.section[id="option6"]').click(function(){
                    $(this).text($(this).text() == 'OPTION6' ? 'OPTION6 >>' : 'OPTION6');
                    $('.blurb').not('.blurb[id="option6"]').hide();
                    $('.blurb[id="option6"]').slideToggle();
                });
        });

(動作中の完全なコードはここで見ることができます)

このコードはほとんどの部分で機能しますが、特定の要素 (class="blurb") が既に表示されている場合、別の要素のメニュー項目 (class="section") をクリックすると、メニューは他の要素を示します。要素はまだ開いています。クリック時に目的のテキストを追加または削除する簡単な方法が必要なようですが、それを行う良い方法が見つからないようです。expander.jsのようなものを使用してコードを書き直す価値はありますか?

これが影響を受けたhtmlです

<div class="nav">
    <div class="section" id="option1">option1</div>
    <div class="section" id="option2">option2</div>
    <div class="section" id="option3">option3</div>
    <div class="section" id="option4">option4</div>
    <div class="section" id="option5">option5</div>
    <div class="section" id="option6">option6</div>
 </div>

        <div class="blurb hidden" id="option1">
        <h1>content for option1</h1>
    </div>
    <div class="blurb hidden" id="option2">
        <h1>content for option2</h1>
    </div>
    <div class="blurb hidden" id="option3">
        <h1>content for option3</h1>
    </div>
    <div class="blurb hidden" id="option4">
        <h1>content for option4</h1>
    </div>
    <div class="blurb hidden" id="option5">
        <h1>content for option5</h1>
    </div>
    <div class="blurb hidden" id="option6">
        <h1>content for option6</h1>
    </div>

私はまだjQueryにかなり慣れていないので、アドバイス/ポインタは大歓迎です。

4

1 に答える 1

0

カスタム クラスと:afterCSS スタイルを使用して問題を解決しました: http://jsfiddle.net/mblase75/sDrZ2/3/

最初に、テキストを直接変更せずに、矢印を追加して大文字に変換する CSS をいくつか示します。

.uppercase {
    text-transform: uppercase;
}
.uppercase.arrowed:after { 
    content: " >>";
}

HTML にいくつかの変更を加えて、data-属性を利用し、重複する ID を削除arrowedし、JS が切り替えるクラスを追加します。

<div class="nav">
    <div class="section arrowed" data-blurb="option1">option1</div>
    <div class="section arrowed" data-blurb="option2">option2</div>
    <div class="section arrowed" data-blurb="option3">option3</div>
    <div class="section arrowed" data-blurb="option4">option4</div>
    <div class="section arrowed" data-blurb="option5">option5</div>
    <div class="section arrowed" data-blurb="option6">option6</div>
</div>

最後に、JavaScript を大幅に最適化するために書き直します。

 $('.section').click(function () {
     $(this).addClass('uppercase').toggleClass('arrowed')
         .siblings('.section').removeClass('arrowed');
     $('#'+$(this).data('blurb')).slideToggle()
         .siblings('.blurb').hide();
 });

arrowedクラスはトグルされているため、最初のクリックでトグルがオフになるように最初に追加する必要があることに注意してください。

于 2013-02-18T16:08:29.713 に答える