Question

我在primary-nav中有四个链接，需要激活相应的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一起工作。

他们是否可以这样说：primary-nav a, get class of clicked a, find ul with this class然后运行脚本的其余部分？

jsFiddle：http://jsfiddle.net/DRZZr/

Answer 1

假设锚点不在您要扩展的ul.patient内，我会使用rel属性或类似的东西来了解您的目标是什么。 jquery ui在其数据目标中做了很多。有关示例，请参阅我更新的jsfiddle：

编辑：http://jsfiddle.net/DRZZr/7/根据新请求/要求更新JSFiddle脚本。

我还添加了一些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');
                                     }

                                 });
});

隐藏所有#sliderareas uls，然后显示类似于所点击的li的rel的类。您也可以将rel放在li中的锚点上，或者如果您愿意，可以使用锚点的href ='＃hash'，然后单击a使用href attr找到＃幻灯片ul，ID设置为$(this).attr('href')。如果您需要该示例，我可以进行另一个jsfiddle编辑。

Answer 2

试试这个：

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

Answer 3

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

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

将定位父级ul。

查找相关类jQuery

3 个答案: