jQuery UL带链接-仅影响li子级

Question

I am trying to create a simple mobile drop down menu using a click to display the submenus. I would like ONLY the jQuery ul items that have submenu's to be called on a click and then have access to only effect the li below them. In short I click on a button and a drop down for that button shows.

I would like to NOT have to name them with ID's if possible. I want to have it be more universal that can be used by all ul menus.

Here is one of the jQuery scripts I tried. Both jQuery lines calling the html and css do not work.

$('nav ul > li > ul > li.active').click(function() {
    alert("It worked! ");
    $('ul > li').show();// This also does not work. 
});

Here is the nav menu.

<nav>
          <ul>
            <li><a href="home">Home</a></li>
            <li><a href="mission">Mission</a></li>
            <li><a href="co-op">Co-op</a> 
              <!-- First Tier Drop Down -->
              <ul>
                <li><a href="hybrid-model">Hybrid Model</a></li>
                <li><a href="classical-education">Classical Education</a></li>
                <li><a href="courses">Courses</a></li>
                <li><a href="tuition">Tuition</a></li>
                <li><a href="uniforms">Uniforms</a></li>
                <li><a href="staff">Staff</a></li>
                <li><a href="documents">Ducuments</a></li>
              </ul>
            </li>
            <li><a href="Catechesis-of-The-Good-Shepherd">Catechesis of The Good Shepherd</a>
              <ul>
                <li><a href="what-is-cgs">What Is CGS?</a></li>
                <li><a href="level-1">Level 1</a></li>
                <li><a href="level-2">Level 2</a></li>
                <li><a href="level-3">Level 3</a></li>
                <li><a href="uniforms">Uniforms</a></li>
                <li><a href="atrium-child">The Atrium Child</a></li>
                <li><a href="atrium-adult">The Atrium Adult</a></li>
              </ul>
            </li>
            <li><a href="about">About Us</a>
                <ul>
                    <li><a href="board-members">Board Members</a></li>
                    <li><a href="Pro-Ecclesia-Sancta-Catholic-Advance-Movement">Pro Ecclesia Sancta /<br>Catholic Advance Movement</a></li>
                </ul>
            </li>
            <li><a href="contact">Contact</a></li>
          </ul>
  </nav>

Answer 1

Here is one solution, I did not uses ID's but classes:

$('li.dropdown').click(function() {
    $('.dropdown.dropdown-open').removeClass('dropdown-open');
    $(this).toggleClass('dropdown-open');
});

http://jsfiddle.net/o1t40hn1/

I don't know what you tried to achieve with your JS, because you can not click on sth that is hidden. So you need to click on the li that has a ul. You also could do it without the classes I used by doing sth like:

$('li').click(function() {
    if ($(this).find('ul')){
       $('nav > ul > li > ul').hide();
       $(this).find('ul').show();
    }      
});

Here we go: http://jsfiddle.net/b82ed0z3/