How to fix this error in dropdown menu

Discussion in 'jQuery' started by Sayedtaqui, Feb 21, 2013.

  1. #1
    Hi,
    I m creating a dropdown menu with jquery which is working fine on two clicks however if you click on the link the third time if slides up and down itself. Can you tell me what mistake I m making and how to fix this. I dont want to add any more classes or ids in the markup. I m new to jquery so an explanation would be very helpfull.
    here is the code..

    <!DOCTYPE>
    <html >
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     
    </head>
     
    <style>
     
    .sidebar li{
        list-style:none;
        background-color: #ccc;
        width:100px;
        }
     
    .sidebar li ul li{
        background:#fff;
        display:block;
        }
     
    .sidebar li ul{
        background:#fff;
        margin-left:-40px;   
        }
     
    .sidebar li ul li a{
        color:#000;
        display:block;
        }
     
    .sidebar a{
        text-decoration:none;
        color:#fff;
        }
     
    .active{
        color:#c39;
        font-weight:bold;
        }
     
    </style>
     
    <body>
     
    <div >
        <ul class="sidebar">
                <li ><a  href="#">Home</a>
                <ul id="areaa" >
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item2</a></li>
                    <li><a href="#">Item3</a></li>                             
                </ul>
                </li>
                <li><a href="#">About Us</a>
                <ul  id="areab">
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item5</a></li>
                    <li><a href="#">Item6</a></li>                             
                </ul>
                </li>       
                <li><a href="#">Contact Us</a></li>       
                <li><a href="#">Products</a></li>       
                <li><a href="#">Menu</a></li>                   
        </ul>
    </div>
     
    <script>
     
    $(document).ready(function(e) {
        $('.sidebar li ul').hide();
     
    });
     
            $('.sidebar li').click(function(){
                $(this).addClass('active');
                $('.active ul').slideDown(700);
           
                    $('.active').click(function(){
                $('.active ul').slideUp(700);
                $('.active').removeClass('active');
               
                    });
            });
       
    </script>
    </body>
    </html>
    HTML:

     
    Sayedtaqui, Feb 21, 2013 IP
  2. huseinbandi

    huseinbandi Well-Known Member

    Messages:
    1,060
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #2
    can you upload that first? and i'll helping you.. ^^
     
    huseinbandi, Mar 4, 2013 IP