JQuery - セレクタ（兄弟、親...）の問題

Question

結果が国名にグループ化されたcoldfusionクエリがあります。これをクリックすると、その国の下のリストを開いたり閉じたりしようとします。しかし、私はこの兄弟とこの親と正しく動作することはできません。結果は、国名をクリックすると、4番目の名前がクリックされると、すべての子が閉じられ、3つ前の国名が閉じられます。 誰かが正しいセレクタを選ぶ手助けをすることができますか？ は、事前に ミシェル

ありがとうコード：

<script type="text/javascript" language="javascript"> 
    $(document).ready(function(){ 
     var toggleMinus = '<cfoutput>#variables.strWebAddress#</cfoutput>/images/bullet_toggle_minus.png'; 
     var togglePlus = '<cfoutput>#variables.strWebAddress#</cfoutput>/images/bullet_toggle_plus.png'; 
     var $subHead = $('table#categorylist tbody th:first-child'); 
     $subHead.prepend('<img src="' +toggleMinus+ '" alt="collapse this section" />&nbsp;'); 
     $('img', $subHead).addClass('clickable').click(function(){ 
      var toggleSrc = $(this).attr('src'); 
      if(toggleSrc == toggleMinus){ 
       $(this).attr('src',togglePlus).parents('.country').siblings().fadeOut('fast'); 
      }else{ 
       $(this).attr('src',toggleMinus).parents('.country').siblings().fadeIn('fast'); 
      } 
     }); 
    }); 
</script> 

<table width="95%" border="0" cellspacing="2" cellpadding="2" align="center id="categorylist"> 
<thead> 
    <tr> 
     <th class="text3" width="15%"> 
      <cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_CODENUMBER"> 
     </th> 
     <th class="text3" width="15%"> 
      <cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_CODE"> 
     </th> 
     <th class="text3" width="55%"> 
      <cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTOR_NAME"> 
     </th> 
     <th class="text3" width="15%"> 
      <cfmodule template="../custom_tags/get_message.cfm" keyName="L_ACTIVE"> 
     </th> 
    </tr> 
</thead> 
<tbody id="content"> 
<cfoutput query="qryCategoryUrl" group="country_name" groupcasesensitive="false"> 
    <tr class="country"> 
     <th style="font-weight:bold; text-align:left;" colspan="4">#country_name#</th> 
    </tr> 
<cfoutput> 
    <tr> 
     <td valign="top" class="text3">#Replace(ACTOR_CODENUMBER, Chr(13) & Chr(10), "<br>", "ALL")#&nbsp;</td> 
     <td valign="top" class="text3">#Replace(ACTOR_CODE, Chr(13) & Chr(10), "<br>", "ALL")#&nbsp;</td> 
     <td valign="top" class="text3">#Replace(ACTOR_NAME, Chr(13) & Chr(10), "<br>", "ALL")#&nbsp;</td> 
     <td valign="top" class="text3"><cfmodule template="../custom_tags//get_message.cfm" keyName="#ACTIVE_display(qryCategoryUrl.ACTIVE)#"></td> 
    </tr> 
</cfoutput> 
</cfoutput> 
</tbody> 
</table> 

Answer 1

の代わりに：

.parents('.country').siblings().fadeOut('fast'); 

これを試してみてください：

.closest('.country').nextUntil('.country').fadeOut('fast'); 

そしてもちろん、同じ変更を適用します.fadeIn()へ。また、.fadeToggle()^docsを調べることもできます。

ここには、（還元された）例があります：http://jsfiddle.net/redler/5sqJz/です。この例には影響しませんが、おそらく、これらの詳細行の初期状態を非表示に設定することになります。

Answer 2

woahすべてのcfmoduleの使用法、cfmoduleはメモリ豚になることができます。私はいつもお勧めします何が、

は、人々がどんなブラウザで自分のページを試してみて、これはそれが簡単にテストし、アプリのニーズに合わせて、正しい選択をチェックすることができますhttp://www.selectorgadget.com/

でSelectorGadgetブックマークレットを使用することです。