Jquery不能正常工作
Jquery不能正常工作
提问于 2015-08-20 15:20:31
这是(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元素的it和类是不同的。
回答 4
Stack Overflow用户
发布于 2015-08-20 15:32:06
这段代码应该写成这样：
$(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
}
});
}); Stack Overflow用户
发布于 2015-09-15 17:55:38
这个解决方案实际上非常简单，只需要在代码中做两处小改动。
解决方案
- jQuery function
slideToggle将自动执行您所需的操作。
只需将这一行从：
$('.cuisines ul').slideDown('normal');至
$('.cuisines ul').slideToggle('normal');- 将单击处理程序选择器更改为仅特定于顶部链接：
HTML：
<li class='has-sub cuisines'>
<a href='javascript:void(0)'>
<span class="toggler">Cuisine</span>
</a>
...
</li>`JS：
$('li.cuisines span.toggler').click(function(e){
...以下是指向工作示例的链接：https://jsfiddle.net/56sdLxht/
希望这能有所帮助！
Stack Overflow用户
发布于 2015-08-20 15:32:12
尝试添加stopPropagation函数。
<script type="text/javascript">
$(document).ready(function(){
var i=0;
$('.cuisines').click(function(e){
e.stopPropagation();
i++;
//alert("hello : "+$(".cuisines ul").val());
$('#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');
if(i%2===0){
$('.cuisines ul').slideUp('normal');
$('.cuisines').removeClass('active');
}
});
});
</script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32111893
复制相关文章
相似问题
腾讯云开发者
