How do I build a dropdown menu from a dynamically created nested unordered list?

Question

I have an unordered list that is dynamically generated in a loop with nested unordered lists. I would like to show just the <h4> nested list name </h4> and then, when clicked, the sub-list will display.

Here is the entire block of code that creates the lists:

    <ul class="faceted-menu">
<?php
    // Loop through faceted menus
    while(shopp('collection.facet-menus')) :

    // Skip menus with no options
    if ( ! shopp('collection.facet-menu-has-options')) continue;
?>
<li>
    <h4 style="color: #303030;"><?php
    // current facet filter name
    shopp('collection.facet-name'); ?></h4>
    <ul class="facet-option" style="display:none;">
        <?php
        // Loop through filter options for this faceted menu
        while(shopp('collection.facet-options')) : ?>
            <li>
                <a href="<?php
                    // toggle url for current filter option
                    esc_url(shopp('collection.facet-option-link')); ?>"><?php
                    // the full label of the facet filter option
                    shopp('collection.facet-option-label'); ?></a>&nbsp;(<span class="count"><?php
                // the number of products sharing this facet
                shopp('collection.facet-option-count'); ?></span>)
            </li>
        <?php endwhile; ?>
    </ul>
</li>
<?php endwhile; ?>
    </ul>

And here are two jQuery scripts that I tried but was unsuccessful in getting either to work:

    $("ul.faceted-menu li").click(function(event) { 
$(this).find("ul.facet-option").removeAttr('style'); 
    });

and:

    $("ul.faceted-menu li").live('click', function() { 
$(this).find("ul.facet-option").removeAttr('style');  
    });

I am open to any suggestions.

Answer 1

Try this: It will show the .facet-option when the menu li is clicked.

  $("ul.faceted-menu li").click(function() { 
     $(".facet-option", this).show();
  });

If you need to hide the other menus on click

 $("ul.faceted-menu li").click(function() { 
     $(".facet-option").hide();
     $(".facet-option", this).show();
  });