javascript - 使用 jQuery 选择器解决这个问题的最佳方法是什么？

Question

我真的不知道什么是最好的标题。基本上，在我的页面上有一个由 jQuery (.slide) 实现的下拉菜单。下拉菜单出现在页面的顶部和底部，因此用户更容易向下滚动并且仍然可以使用下拉菜单。显示此内容的页面我使用 Rail Partial，这样我就可以很容易地重构它。

问题是，由于两个下拉菜单位于同一页面，因此它们不可能没有相同的 ID，但它们具有相同的功能，当用户单击然后打开并显示其他选项时。让他们使用相同的逻辑但不同的 id 和尽可能少的代码的最佳方法是什么？

我不想做这样的事情。

        $('.sub_export_record1').hide();

        $('.export_record_link1').click( function(e) {
            e.preventDefault();
        });

        $('.export_record1').click( function(e) {

            if ( $(".sub_export_record1").is(":hidden") )
            {
                $('.sub_export_record1').slideDown("slow");
            }
            else
            {
                $('.sub_export_record1').hide();
            }
        });

然后是第二个

        $('.sub_export_record2').hide();

        $('.export_record_link2').click( function(e) {
            e.preventDefault();
        });

        $('.export_record2').click( function(e) {

            if ( $(".sub_export_record2").is(":hidden") )
            {
                $('.sub_export_record2').slideDown("slow");
            }
            else
            {
                $('.sub_export_record2').hide();
            }
        });

非常感谢。 :)

HTML

<ul>
<li class="export_record">
    <%= link_to "Export this Record"%>
    <ul class="sub_export_record">
        <li><%= link_to "Export to Photo Wall"%></li>
        <li><%= link_to "Export to PDF"%></li>
        <li><%= link_to "Export to CSV"%></li>
    </ul>
</li>
</ul>

Answer 1

无需识别元素。给他们相同的类(正如您在代码片段中已经拥有的那样):

$('.sub_export_record').hide();

$('.export_record').click( function(event) {
    event.preventDefault();

    var $sub = $(this).children(".sub_export_record");       
    if ( $sub.is(":hidden") ) {
        $sub.slideDown("slow");
    }
    else {
        $sub.hide();
    }
});