这是 (html + php) 代码。
<li class='has-sub cuisines'><a href='javascript:void(0)'><span>Cuisine</span></a>
<ul>
<li class=""><a href='javascript:void(0)'><span><input type="text" name="search_cuisine" id="search_cuisine" placeholder=" Search Cuisine Here" /></span></a></li>
<!--<img id="loader_cuisine" src="images/preloader_8.gif"/>-->
<div id="list_cuisine" >
<?php
$row_count=0;
$query="select cuisine_ID,cuisine_name from cuisine_master where del_flag=1 and display_flag=1 order by cuisine_name";
$r= mysql_query($query);
while($result= mysql_fetch_array($r))
{
$ii=0;
$query12="select distinct r.res_ID from restaurant_master r, buffet_master b, restaurant_cuisine_master cm where r.del_flag=1 and r.res_status=1 and b.res_ID=r.res_ID and cm.res_ID=r.res_ID and cm.cuisine_ID=$result[cuisine_ID]";
$r12= mysql_query($query12);
while($result12= mysql_fetch_array($r12))
{
$ii++;
}
if($row_count<10 && $ii>0)
{
$row_count++;
?>
<li><a href='javascript:void(0)'><span><input type="checkbox" name="cuisine[]" id="cuisine_<?php echo $result['cuisine_ID']; ?>" class="cuisine" value="<?php echo $result['cuisine_ID']; ?>"/><label for="cuisine_<?php echo $result['cuisine_ID']; ?>"><?php echo $result['cuisine_name']; ?>(<?php echo $ii; ?>)</label></span></a></li>
<?php
}
}
?>
</div>
</ul>
</li>
这是 Jquery 代码
$(document).ready(function(){
$('.cuisines').click(function(e){
$('#additional,#seating,#budget,#locations,#last_order,#discount,#buffet_type').removeClass('active');
$('.cuisines').addClass('active');
$('.cuisines ul').slideDown('normal');
$('#locations ul').slideUp('normal');
$('#additional ul').slideUp('normal');
$('#seating ul').slideUp('normal');
$('#budget ul').slideUp('normal');
$('#last_order ul').slideUp('normal');
$('#discount ul').slideUp('normal');
$('#buffet_type ul').slideUp('normal');
});
});
这是更新后的 javascript 代码,但 cuisines li 打开后并没有关闭。 当我点击 cuisines li 然后它打开所有 ul 元素但是当我点击它的 ul 元素然后也打开和关闭所有 ul 元素这不应该完成,因为 li 和 ul 元素的 ID 和类是不同的。
最佳答案
这段代码应该是这样写的:
$(document).ready(function(){
var i=0;
$('.cuisines').click(function(){ // click the cuisines li
i++;
$(this).addClass('active').siblings('li').removeClass('active'); // add an active class to clicked li and remove from other siblings li
$('ul', this).slideDown('normal'); // slidedown the ul of clicked li only
$(this).siblings('li').find('ul').slideUp('normal'); // slideup all the siblings ul which are in view.
if(i%2===0){
$('ul', this).slideUp('normal'); // slideup the child ul of clicked li
$(this).removeClass('active'); // remove the active class from current active li.cuisines
}
});
});
关于javascript - Jquery 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32111893/