2016-04-04 12 views
0

私はこれをできる限り明確に説明しようとしています。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">&nbsp;</td> 
     </tr> 
<?php } while ($row_AuditItems = mysql_fetch_assoc($AuditItems)); ?> 

それはページがロードされたとき、それは、A表示されたよう各SeqTextのSeqHeader。それらはクリック可能で、クリックするとサブリストが開きます。

SeqHeaderをクリックすると関連するすべてのサブアイテムが表示され、再度クリックすると隠れるように、親SeqHeaderのサブアイテムに関するすべてのSeqTextアイテムがサブリストとして保持されます。

申し訳ありませんが、私はうんざりしています。

ご協力いただきまして誠にありがとうございました。

乾杯。

答えて

0

あなたが得ているアイテムの多次元配列を使いやすくするために、それ以上のことはありませんか?私が集まると、は非推奨のmysqlコールを使用してDBから情報の行を取得しています。各行にはヘッダーとテキストが関連付けられます。つまり、行ごとにインラインで呼び出すと、各行にヘッダーが付きます。代わりに以下を試してみてください。

<?php 
    $res = array(); 
    while ($row = mysql_fetch_assoc($AuditItems)) { 
     if ($row['SeqHeader'] && $row['SeqText']) { 
      if (!$res[$row['SeqHeader']]) $res[$row['SeqHeader']] = array(); 
      $res[$row['SeqHeader']][] = $row['SeqText']; 
     } 
    } 
?> 
<ul id="nav"> 
    <?php foreach ($res as $k => $v): ?> 
    <li class="expanded"> 
     <a class="on"><?php echo $k; ?></a> 
     <ul class="submuneu"> 
      <?php foreach ($v as $item): ?> 
       <li><a><?php echo $item; ?></a></li> 
      <?php endforeach; ?> 
     </ul> 
    </li> 
    <?php endforeach; ?> 
</ul> 

私は今あなたがHTMLレイアウトにある最大の問題だと思います。しかし、これはそれを助けるはずです。それを修正し、JSがまだ問題であるかどうかを判断しますが、JSでの作業は比較的簡単です。開口部を扱うとしてHTMLマークアップを使用してサブメニューを閉じるための簡単なJavaScriptを

例:

UL> LI> A + UL> LI>

// \t simply jQuery shorthand for document.ready = function() { ... 
 
$(function() { 
 
\t // \t the following is how to add events so that they work for even "dynamically" created elements. 
 
\t // \t That is, elements created after code/page load. 
 
\t $(document).on('click', 'li a', function(e) { 
 
\t \t e.preventDefault(); \t // \t ensure it doesn't try to follow a link 
 
\t \t // \t close all possible siblings and cousins 
 
\t \t $(this).parents('li').each(function(i) { $(this).siblings().find('ul').slideUp(); }); 
 
\t \t // \t slide toggle current possible sub menu 
 
\t \t $(this).next('ul').slideToggle(function() { if (!$(this).is(':visible')) $(this).find('ul').hide(); }); 
 
\t }); 
 
\t 
 
\t // \t uncomment the following line to ensure all sublist are closed, 
 
\t // \t however, i strongly recommend this should be done using css 
 
\t // \t $('ul ul').hide(); 
 
\t 
 
\t // \t change cursor for li elements having a sub menu 
 
\t $('li').each(function(i) { 
 
\t \t if ($(this).children('ul').length) { \t // \t test if it has a submenu 
 
\t \t \t $(this).css({ cursor: 'pointer' }); 
 
\t \t \t // \t just for this test, i'm going to add a background color to A tags on li's having a submenu 
 
\t \t \t $(this).children('a').css({ backgroundColor: '#f8f800' }) 
 
\t \t } 
 
\t }); 
 
})
/* this simply hides all submenus outright */ 
 
ul ul { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
\t <li><a>test1</a> 
 
\t \t <ul> 
 
\t \t \t <li><a>bleh</a></li> 
 
\t \t \t <li><a>bleh Blah</a> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a>blo</a></li> 
 
\t \t \t \t \t <li><a>bli</a> 
 
\t \t \t \t \t \t <li><a>blu</a> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <li><a>orange</a></li> 
 
\t \t \t \t \t \t \t \t <li><a>fruit</a></li> 
 
\t \t \t \t \t \t \t \t <li><a>apple</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li><a>ble</a> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <li><a>gravy</a></li> 
 
\t \t \t \t \t \t \t \t <li><a>steak</a></li> 
 
\t \t \t \t \t \t \t \t <li><a>bra</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li><a>testCc</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </li> 
 
\t <li><a>test2</a> 
 
\t \t <ul> 
 
\t \t \t <li><a>testPrev</a> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a>testA</a></li> 
 
\t \t \t \t \t <li><a>testB</a></li> 
 
\t \t \t \t \t <li><a>testC</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t \t <li><a>testNext</a> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a>testAa</a></li> 
 
\t \t \t \t \t <li><a>testBb</a> 
 
\t \t \t \t \t \t <li><a>testPrev2</a> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <li><a>testA1</a></li> 
 
\t \t \t \t \t \t \t \t <li><a>testB2</a></li> 
 
\t \t \t \t \t \t \t \t <li><a>testC3</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li><a>testNext4</a> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <li><a>testAa4</a></li> 
 
\t \t \t \t \t \t \t \t <li><a>testBb5</a></li> 
 
\t \t \t \t \t \t \t \t <li><a>testCc6</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li><a>testCc</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </li> 
 
\t <li><a>test3</a> 
 
\t \t <ul> 
 
\t \t \t <li><a>blah</a></li> 
 
\t \t </ul> 
 
\t </li> 
 
</ul>

+0

こんにちはSpYk3HH、それは完璧に近いダムです。私が持っている唯一の問題は、ページがロードされたときにすべてのサブリストが開いていることです。 jqueryセクションで私は間違いを犯しましたか? – DCJones

+0

@DCJones OK、自分のjs(使用する必要はありません)とcssの小さな部分の少しで答えを更新しようとしています。 – SpYk3HH

+1

それは完璧です。私はあなたのアップデートを使用しました。これは、私が使い始めたコードよりもはるかに優れています。あなたのお時間をありがとうございました。私はこの答えを正しいものとしてマークします。 – DCJones

0

あなたは試みることができる:

$(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');   
    } 
}); 

$(document).on('click', 'a.on', function(){ 
    $('a.on').removeClass("active"); 
    $(this).addClass("active"); 
}); 
}); 

をいくつか-code generated-要素が$(document).on('event', 'element', function(){...});を使用して、 "聞く" ことが必要です。 お手伝いをしてください。

関連する問題