JQuery以列表格式显示和隐藏查询中的数据，该列表显示打开其子列表的父可单击列表 - JQuery show and hide data from a query in list format that displays parent clickable list that opens its child list

我将尽可能清楚地解释这一点。

我正在使用@Prabu-Pathipan的一些脚本，该脚本使用JQuery打开和关闭父列表的子列表。

我有一个返回数据数组的查询。在数组中，我有两个字段：

SeqHeaderSeqText

每个SeqHeader都有数量可变的SeqText项。

示例：

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 do while循环将以上内容显示为行，但我认为最好生成一个具有打开和关闭子列表的列表。

因此采用了Prabu Partipan代码@Prabu Partipan代码为：

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

加载页面时，它会为每个SeqText显示一个SeqHeader。它们是可点击的，点击后会打开子列表。

我想做的是将与其父SeqHeader相关的所有SeqText项作为子列表，这样当单击SeqHeader时，所有相关的子项都会显示，然后再次单击以隐藏它们。

对不起，如果我继续乱搞。

任何帮助都将是伟大的，我感谢你的时间。

干杯。

制作一个简单易用的多维项目数组不是更有意义吗？据我所知，您正在使用弃用的mysql调用来从数据库中获取信息行。每一行都将具有关联的页眉和文本。因此，如果您通过每一行调用inline，那么每一行都会有一个标题。请尝试以下操作。

<?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标记处理打开和关闭子菜单的Easy JavaScript示例为：

UL>LI>A+UL>LI>

//	simply jQuery shorthand for document.ready = function() { ...
$(function() {
	//	the following is how to add events so that they work for even "dynamically" created elements. 
	//	That is, elements created after code/page load.
	$(document).on('click', 'li a', function(e) {
		e.preventDefault();	//	ensure it doesn't try to follow a link
		//	close all possible siblings and cousins
		$(this).parents('li').each(function(i) { $(this).siblings().find('ul').slideUp(); });
		//	slide toggle current possible sub menu
		$(this).next('ul').slideToggle(function() { if (!$(this).is(':visible')) $(this).find('ul').hide(); });
	});
	
	//	uncomment the following line to ensure all sublist are closed, 
	//	however, i strongly recommend this should be done using css
	//	$('ul ul').hide();
	
	//	change cursor for li elements having a sub menu
	$('li').each(function(i) {
		if ($(this).children('ul').length) {	//	test if it has a submenu
			$(this).css({ cursor: 'pointer' });
			//	just for this test, i'm going to add a background color to A tags on li's having a submenu
			$(this).children('a').css({ backgroundColor: '#f8f800' })
		}
	});
})

/*  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>
	<li><a>test1</a>
		<ul>
			<li><a>bleh</a></li>
			<li><a>bleh Blah</a>
				<ul>
					<li><a>blo</a></li>
					<li><a>bli</a>
						<li><a>blu</a>
							<ul>
								<li><a>orange</a></li>
								<li><a>fruit</a></li>
								<li><a>apple</a></li>
							</ul>
						</li>
						<li><a>ble</a>
							<ul>
								<li><a>gravy</a></li>
								<li><a>steak</a></li>
								<li><a>bra</a></li>
							</ul>
						</li>
					</li>
					<li><a>testCc</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a>test2</a>
		<ul>
			<li><a>testPrev</a>
				<ul>
					<li><a>testA</a></li>
					<li><a>testB</a></li>
					<li><a>testC</a></li>
				</ul>
			</li>
			<li><a>testNext</a>
				<ul>
					<li><a>testAa</a></li>
					<li><a>testBb</a>
						<li><a>testPrev2</a>
							<ul>
								<li><a>testA1</a></li>
								<li><a>testB2</a></li>
								<li><a>testC3</a></li>
							</ul>
						</li>
						<li><a>testNext4</a>
							<ul>
								<li><a>testAa4</a></li>
								<li><a>testBb5</a></li>
								<li><a>testCc6</a></li>
							</ul>
						</li>
					</li>
					<li><a>testCc</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a>test3</a>
		<ul>
			<li><a>blah</a></li>
		</ul>
	</li>
</ul>

您可以尝试：

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

某些代码生成的元素需要使用$(document).on('event', 'element', function(){...});进行"侦听"。希望能有所帮助。