シンプルなjQueryで見出しのアイコンを切り替える

Question

最小限のコードで非常に簡単なjQueryトグルがあります。問題は、背景のCSSイメージとして右端に配置されたp要素に適用されるトグル記号に適用されるトグル動作のみを必要とすることです。今は要素全体に適用されます。タイトルはハイパーリンクなので、クリックすると新しいURLに行く前にトグルを開始します。

HTMLコードのようなある：

<ul> 
    <li> 
     <p class="accordion-toggle dormantState"><a href="http://google.com">Q ANZAC 100</a></p> 
     <div class="accordion-content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
    </li> 
    <li> 
     <p class="accordion-toggle dormantState"><a href="http://google.com">Business studio</a></p> 
     <div class="accordion-content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
    </li> 
    <li> 
     <p class="accordion-toggle dormantState"><a href="http://google.com">The Edge</a></p> 
     <div class="accordion-content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
    </li> 
</ul> 

CSS：

.accordion-toggle {cursor: pointer; width: 80%; } 
.activeState { background-image: url(../img/minus-icon.png)!important; background-position: right center; background-repeat: no-repeat; } 
.dormantState { background-image: url(../img/plus-icon.png); background-position: right center; background-repeat: no-repeat; } 
.accordion-content {display: none; border: 1px solid: #ccc; width: 70%; } 

JS：私はスパンを作成しようとしました

$(document).ready(function($) { 
    $('.otherSites').find('.accordion-toggle').click(function(){ 

    $('.accordion-toggle').removeClass('activeState'); 
    if($(this).parent().find('.accordion-content').css('display')=='none'){ 
     $(this).addClass('activeState'); 
    } 

     //Expand or collapse this panel 
     $(this).next().slideToggle('fast'); 

     //Hide the other panels 
     $(".accordion-content").not($(this).next()).slideUp('fast'); 

    }); 
    }); 

タグを閉じた後にアコーディオントグルクラスを適用するだけでなく、JSコードをリファクタリングすることもできます（親の構文を使用します）。しかし、私はそれを複雑すぎて自分自身のために穴を開けていると思います。 JSコードを微調整するだけで簡単に解決できますか？

Answer 1

私はこれを自分で解決することができました。実質的にコードを再配置しなければならなかった。画像の背景を持つクラスを使用してディンチされ、スパン要素を使用しました。

HTMLコード：

<ul> 
    <li> 
    <p class="accordion-toggle dormantState"><a href="http://qanzac100.slq.qld.gov.au">Q ANZAC 100</a><span class="toggleIcon">+</span></p> 
    <div class="accordion-content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    </li> 
    <li> 
    <p class="accordion-toggle dormantState"><a href="#">Business studio</a><span class="toggleIcon">+</span></p> 
    <div class="accordion-content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    </li> 
    <li> 
    <p class="accordion-toggle dormantState"><a href="http://edgeqld.org.au/">The Edge</a><span class="toggleIcon">+</span></p> 
    <div class="accordion-content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    </li> 
    <li> 
</ul> 

JSコード：JSコードに満足し、span要素にクラスを与えるために持っ

$(document).ready(function($) { 
$('.otherSites').find('.accordion-toggle span').click(function(){ 

    //Expand or collapse this panel 
    $(this.parentNode).next().slideToggle('fast'); 

    // Determine if it's open or closed 
    var toggleState = $(this).html(); 
    if (toggleState=="+") { 
     $(this).html("-"); 
    } else if (toggleState=="-") { 
     $(this).html("+") 
    } 

    //Hide the other panels 
    $(".accordion-content").not($(this.parentNode).next()).slideUp('fast'); 

    //Find change the icon of any open panels back to closed 
    if($('.otherSites').find('.accordion-content span').html("-")){ 
     console.log("make all other toggles go to +"); 
     $(".toggleIcon").not($(this)).html("+") 
    } 
}); 
}); 

ない100％が、それは仕事をしていません。