如何从动态创建的嵌套无序列表构建下拉菜单？

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

试试这个：当点击菜单 li 时它会显示 .facet-option。

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

如果您需要在点击时隐藏其他菜单

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