查找相关类jQuery

我有四个链接，在主导航内部，需要激活相应的slideDown元素。链接有单独的父类，

.patient>a

、

.doctor>a

、

.primary>a

和

.locations>a

当有人点击

.patient>a

时，我需要ul.patient成为目标ul

我在做实验，但到目前为止我已经做到了：

var $patientDrop = $('ul.patient');

$patientDrop.hide();
$('.patient > a').click(function() {
  if ($patientDrop.is(':visible')) {
      $patientDrop.slideUp(function() {
        $('.patient > a').removeClass('active');
      });
  }
  else {
    $patientDrop.slideUp(function() {
        $('.patient > a').removeClass('active');
    });
    $patientDrop.slideDown();
    $('.patient > a').addClass('active');
  }
});
$('body').click(function(event) {
if (!$(event.target).is('a')) {
  $patientDrop.slideUp(function() {
        $('.patient > a').removeClass('active');
  });
}
});

现在，我使用变量只是为了学习，也许它们是这里需要的。但我真正的问题是，如何以最有效的方式进行。我不想用不同的变量重复所有这些代码四次，只是为了让它与每四个链接及其对应的UL一起工作

他们有没有办法，比如说：

主导航a，获取点击a的类，用这个类找到ul，然后运行脚本的其余部分

jsidle:
如果需要访问父ul，那么可以使用jquery的父方法

$('.doctor  a').parent('ul') 

将以父ul为目标。
假设锚不在您要展开的
ul.patient
内，我将使用
rel
属性或类似属性来了解您的目标是什么。jQueryUI在其数据目标中经常这样做。有关示例，请参见我更新的JSFIDLE：

编辑：根据新的请求/需求更新JSFIDLE脚本

我还添加了一些ID，使目标更容易确定。我将ID用于“静态”元素——也就是说，它们具有真正的意义，而不仅仅用于普通样式

变化的实质是：

    $(document).ready(function () {
  $('#primary-nav li').click(function()
                                 {
                                     var $elem = $('#sliderareas > ul.' + $(this).attr('rel'));
                                     var $this = $(this);

                                     if($elem.is(':visible'))
                                     {
                                         $elem.slideUp(function() {
                                              $this.find('a').removeClass('active');
                                          });
                                     }
                                     else
                                     {
                                         $elem.slideUp(function() {
                                            $this.find('a').removeClass('active');
                                          });

                                        $elem.slideDown();
                                        $this.find('a').addClass('active');
                                     }

                                 });
});

隐藏所有#slideras uls，然后显示与单击的li的
rel
类似的类。您还可以将rel放在li内的锚上，或者如果愿意，可以使用锚的href='#散列'，然后单击
a
使用
href
attr查找id设置为
$（this.attr（'href'）
的#slideras ul。如果您需要该示例，我可以进行另一次JSFIDLE编辑。
尝试以下方法：

$("a").click(function() {
    var myClass = $(this).parent('li').attr("class");
    var $patientDrop = $('ul.' + myClass);
    alert(myClass);
    // Your code...
});

​
 相应的HTML和演示会非常有用。我不确定我是否理解。你说的是
.patient>a
，但是没有
是
的孩子。我已经更新了我的JSFIDLE，也许这能澄清一点。每个顶级链接都需要打开下面的列表。不幸的是，ul不是ul.primary-nav的孩子。它工作得很好，但一旦我把它转换成我自己的代码，它就坏了。你能给我一些指导吗？被改进的。请参阅新的JSFIDLE进行扩展，以便更紧密地匹配您的示例。现在，每个下拉菜单都独立运行，因此如果需要，您可以同时展开所有下拉菜单（类似于设置的工作方式）。每次单击都会切换相应“companion”部分的扩展状态。我已经更新了代码，而且一切都很好：除了，当一个打开的元素被激活时，是否可以将所有其他打开的元素向上滑动？我认为我的脚本已经做到了这一点，但显然，正如您在JSFIDLE中看到的，它没有做到。我的原始脚本做到了这一点。我以为你想让他们继续扩张。有关更新的脚本（包括正文单击），请参见。更新我的答案是否有一种方法可以让它在四个下拉列表中工作？更新JSIDLE: