jQuery 无法正常工作

Question

这是（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 代码，但美食 li 打开后没有关闭。 当我点击美食 li 时，它会打开所有 ul 元素，但是当我点击它的 ul 元素时，也会打开和关闭所有 ul 元素，这不应该这样做，因为 li 和 ul 元素的 id 和类不同。

Answer 1

这段代码应该写成这样：

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

});    

Answer 2

解决方案实际上非常简单，只需要对代码进行两次小改动。

解决方案

1. jQuery 函数slideToggle 会自动执行您需要的操作。

只需从以下位置更改行：

$('.cuisines ul').slideDown('normal');

到

 $('.cuisines ul').slideToggle('normal');

1. 将点击处理程序选择器更改为仅针对顶部链接：

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/

希望有帮助！

Answer 3

尝试添加 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>

Answer 4

HTML

美食

<div class="menu-toggle hidden" id="customize-menu">
    <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" >
        <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']; ?>"></label>
        </span>
        </a>
        </li>
        </div>
    </ul> 
</div>    

脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('.cuisines').click(function(e){       
      $(".menu-toggle:not(#customize-menu)").hide();
     $("#customize-menu").toggle();
	});
     $('.cuisines input,ul,li').click(function(e){       
     e.stopPropagation();
	});
});
</script>

Js Fiddle Link [此处已解决]

https://jsfiddle.net/dybwbs92/5/embedded/result/