Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Why are all my sub-menu's opening at once? Help?

    Ok, newbie here. Like, REAL new. Anyway, used some script for an animated drop down menu from clarklab.net. I want users to click on menu to expand to sub's, but I can't figure out how to fix it from expanding every single one. I also want users to be able to close back up. Help?

    I am ready to jump. Thanks

    Here is the site, vertical navigation on left side:

    Here's ma' code


    Code:
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    	$("ul.menu_body li:even").addClass("alt");
        $('.menu_head').click(function () {
    	$('ul.menu_body').slideToggle('medium');
        });
    	$('ul.menu_body li a').mouseover(function () {
    	$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
        });
    	$('ul.menu_body li a').mouseout(function () {
    	$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
        });
    });
    </script>
    Code:
    <div class="container">
    <div class="menu_head_nodrop"><p><a href="administrativeservices.html">Administrative Services</a></p>
    </div>
    <div class="menu_head_nodrop">
      <p><a href="birthdeathcertificates.html">Birth &amp; Death Records</a></p>
    </div><div class="menu_head">
      <p>Construction Programs</p>
    </div>
    <ul class="menu_body">
    <li><a href="manufacturedhomes.html">Manufactured Homes Installation</a></li>
    <li><a href="plumbingprogram.html">Plumbing Inspections</a></li>
    <li><a href="healthyhomes.html">Healthy Homes</a></li>
    </ul><div class="menu_head">
      <p>Environmental Health</p>
    </div><ul class="menu_body">
    <li><a href="environmentalhealth.html">Beach Monitoring</a></li>
                          <li><a href="rabies.html">Rabies Control</a></li>
                          <li><a href="foodprotection.html">Food Service</a></li>
                          <li><a href="householdsewage.html">Sewage Treatment Systems</a></li>
                          <li><a href="Radon.html">Radon</a></li>
                          <li><a href="leadsafety.html">Lead Safety</a></li>
                          <li><a href="manufacturedhome.html">Manufactured Home Parks</a></li>
                          <li><a href="marinas.html">Marinas</a></li>
                          <li><a href="http://0052c90.netsolhost.com/nuisance.html">Nuisance Complaints</a></li>
                          <li><a href="privatewater.html">Private Water Systems</a></li>
                          <li><a href="poolandspa.html">Public Swimming Pools &amp; Spas</a></li>
                          <li><a href="realestatesurveys.html">Real Estate Surveys</a></li>
                          <li><a href="rvparks.html">RV Parks &amp; Campgrounds</a></li>
                          <li><a href="http://www.odh.ohio.gov/odhPrograms/eh/schooleh/sehmain.aspx" target="_blank">Schools</a></li>
                          <li><a href="tattooandbody.html">Tattoo &amp; Body Piercing</a></li>
    </ul><div class="menu_head">
      <p>Health Education &amp; Outreach</p>
    </div><ul class="menu_body">
    <li><a href="communityhealth.html">Community Health</a></li>
    <li><a href="http://www.scrubclub.org/home.aspx" target="_blank">Handwashing</a></li>
    <li><a href="healthyhomes.html">Healthy Homes</a></li>
    <li><a href="leadsafety.html">Lead Safety</a></li>
    <li><a href="lifeskills.html">LifeSkills</a>
    <li><a href="schoolwellness.html">School Wellness</a>
    <li><a href="smokefreeworkplace.html">Smoke Free Workplace</a></li>
    <li><a href="teenpregnancy.html">Teen Pregnancy Prevention</a></li>
    </ul><div class="menu_head">
      <p>Nursing &amp; Clinic Services</p>
    </div><ul class="menu_body">
    <li><a href="familypractice.html">Family Practice Services</a></li>
                          <li><a href="bccpinfo.html">Breast &amp; Cervical Cancer Program</a></li>
                          <li><a href="childrenshealth.html">Sports &amp; Work Physicals</a></li>
                          <li><a href="specialneedschildren.html">Children with Special Needs</a></li>
                          <li><a href="communicabledisease.html">Communicable Disease</a></li>
                          <li><a href="familyplanningclinic.html">Family Planning</a></li>
                          <li><a href="helpmegrow.html">Help Me Grow</a></li>
                          <li><a href="HIVAIDS.html">HIV/AIDS Testing</a></li>
                          <li><a href="homehealthcare.html">Home Health Care</a></li>
                          <li><a href="immunizationfaqs.html">Immunization/Shots</a></li>
                          <li><a href="leadscreeningandtesting.html">Lead Screening &amp; Testing</a></li>
                          <li><a href="prenatalclinic.html">Pregnancy Testing &amp; Assistance</a></li>
    <li><a href="schoolnursing.html">School Nursing</a></li>
                          <li><a href="seniorclinic.html">Senior Clinic</a></li>
                          <li><a href="specialtyclinics.html">Outreach Clinics</a></li>
                          <li><a href="HIVAIDS.html">STD Clinic</a></li>
                          <li><a href="tbtesting.html">TB Testing</a></li>
    </ul><div class="menu_head">
      <p>Public Health Preparedness</p>
    </div><ul class="menu_body">
    <li><a href="publichealth.html">General Information</a></li>
                          <li><a href="medicalreservecorps.html">Medical Reserve Corps</a></li>
    </ul><div class="menu_head">
      <p>WIC</p>
    </div><ul class="menu_body">
    <li><a href="wic.html">WIC Services</a></li>
                          <li><a href="http://www.odh.ohio.gov/odhPrograms/ns/wicn/wic1.aspx" target="_blank">Learn More About WIC</a></li>
    </ul>
    </div>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Lightbulb Another version ...

    I investigated your code a bit on another forum
    and was able to come up with this non-JQuery solution.
    See: http://www.webdeveloper.com/forum/sh...&is_resolved=1
    posts #2 and #3 (modification).

    It would need a bit more work with the CSS color combinations and the animation portion
    but it does fix your stated problem.

  • Users who have thanked jmrker for this post:

    katemac (08-19-2011)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    Hello katemac,

    The problem is with this line in your javascript:
    Code:
    $('ul.menu_body').slideToggle('medium');
    What this does is toggles every single ul element with the class "menu_body"... so it's toggling every submenu when "menu_head" is clicked.

    There are a number of solutions, but I think the best one (given your current setup) would be to use jQuery's "next" function.

    Like this:
    Code:
    $('.menu_head').click(function () {
    	$(this).next('ul.menu_body').slideToggle('medium');
        });
    http://api.jquery.com/next/
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •