如何從動態創建的嵌套無序列表構建下拉菜單？

Question

我有一個與嵌套無序列表的循環動態生成的無序列表。我想只顯示<h4> nested list name </h4>然後，點擊後，子列表將顯示。

這裏是整個代碼塊創建列表：

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

，這裏是我試過，但在獲得不成功或者要做兩份jQuery的腳本：

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

和：

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

我願意接受任何建議。

Answer 1

試試這個：它會顯示.facet選項單擊菜單裏的時候。

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

如果你需要隱藏點擊

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