问Jquery不能正常工作
EN

Stack Overflow用户

提问于 2015-08-20 07:20:31

回答 4查看 620关注 0票数 8

这是(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和类是不同的。

javascript

php

jquery

html

css

回答 4

Stack Overflow用户

发布于 2015-08-20 07: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
        }
    });

});

票数 12

Stack Overflow用户

发布于 2015-09-15 09: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/

希望这能有所帮助！

票数 9

Stack Overflow用户

发布于 2015-08-20 07: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>