CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Saurabh Aren Bharatiya
Saurabh Aren Bharatiya

Reputation: 109

Jquery is not working properly

This is (html + php) code. 

<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>

This is Jquery Code

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

    });

});

this is the updated javascript code but cuisines li is not closed after opened. When I clicked on cuisines li then it is open all ul elements but when i clicked on its ul element then also open and close all ul elements this should not be done because ids and classes of li and ul element are different.

Upvotes: 8

Views: 634

Answers (4)

MagJS
MagJS

Reputation: 422

The solution is actually really simple and requires only two small changes in your code.

SOLUTION

  1. The jQuery function slideToggle will automatically do what you need.

Simply change the line from: 

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

to

 $('.cuisines ul').slideToggle('normal');
  1. Change the click handler selector to be very specific to only the top link:

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){
    ...

Here is a link to the working example: https://jsfiddle.net/56sdLxht/

Hope that helps!

Upvotes: 9

Andi AR
Andi AR

Reputation: 2918

Html

Cuisine

<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

<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 [solved solution here]

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

Upvotes: 3

Jai
Jai

Reputation: 74738

This code should have to be written like this: 

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

});

Upvotes: 12

John Saman
John Saman

Reputation: 96

Try adding stopPropagation function.

<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>

Upvotes: 4

Related Questions