私はこれをできる限り明確に説明しようとしています。JQueryは、子リストを開く親のクリック可能なリストを表示するリスト形式のクエリからデータを表示および非表示にします。
@Prabu Parthipanのスクリプトで、JQueryを使用して親リストの子リストを開いたり閉じたりしています。
データの配列を返すクエリがあります。
SeqHeader SeqText
各SeqHeaderがSeqTextアイテムの可変数を持っている:アレイでは私は2つのフィールドを持っています。
例:
SeqHeader:Bedroom Door & Frame (inside & Outside)
SeqText:Chipped - Scratched - Stained - Needs Paint
SeqText:Chipped - Threshold - Sand/Stain - Repair
SeqText:Door Hinges - Squeaks/Sticks - Requires Oil/Repair
SeqHeader:Entry Door Lock
SeqText:Room Door Handle/Strike plate - Not Secure/Not Working
SeqText:Security Door Chain - Not Working
SeqText:Room Door Dead Lock - Not operating Correctly
SeqHeader:Bathroom Door Lock
SeqText:Door Handle/Strike plate - Not secure/Not Working
SeqText:Door Lock - Inoperable
ループが、私ながら、開閉サブリストでリストを作成する方が良いだろうけれどもPHPを使用して行がそうであるように、私は上記を表示することができます。
のでPrabu Parthipanコード @Prabu Parthipanコードを採用することである:
$(document).ready(function(){
$('ul li.expanded > a')
.attr('data-active','0')
.click(function(event){
$('.submuneu').hide();
if($(this).attr('data-active')==0){
$(this).parent().find('ul').slideToggle('slow');
$(this).attr('data-active','1');
}
else
$(this).attr('data-active','0');
});
$('a.on').click(function(){
$('a.on').removeClass("active");
$(this).addClass("active");
});
});
私が持っているページの本体には:
<?php do { ?>
<tr>
<td colspan="3" class="imaindateselleft_padding">
<div class="leftsidebar_templ1">
<ul id="nav">
<li class="expanded"><a class="on"><?php print $row_AuditItems['SeqHeader']; ?></a>
<ul class="submuneu">
<li><a><?php print $row_AuditItems['SeqText']; ?></a> </li>
</ul>
</li>
</ul>
</div>
</td>
<td class="imaindatesel"> </td>
</tr>
<?php } while ($row_AuditItems = mysql_fetch_assoc($AuditItems)); ?>
それはページがロードされたとき、それは、A表示されたよう各SeqTextのSeqHeader。それらはクリック可能で、クリックするとサブリストが開きます。
SeqHeaderをクリックすると関連するすべてのサブアイテムが表示され、再度クリックすると隠れるように、親SeqHeaderのサブアイテムに関するすべてのSeqTextアイテムがサブリストとして保持されます。
申し訳ありませんが、私はうんざりしています。
ご協力いただきまして誠にありがとうございました。
乾杯。
こんにちはSpYk3HH、それは完璧に近いダムです。私が持っている唯一の問題は、ページがロードされたときにすべてのサブリストが開いていることです。 jqueryセクションで私は間違いを犯しましたか? – DCJones
@DCJones OK、自分のjs(使用する必要はありません)とcssの小さな部分の少しで答えを更新しようとしています。 – SpYk3HH
それは完璧です。私はあなたのアップデートを使用しました。これは、私が使い始めたコードよりもはるかに優れています。あなたのお時間をありがとうございました。私はこの答えを正しいものとしてマークします。 – DCJones