0

我有四个链接，在 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/

4

3 回答 3

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，然后显示与rel被点击的li 的类相似的那个。您也可以将 rel 放在 li 内的锚点上，或者如果您愿意，也可以使用锚点的 href='#hash'，然后单击a使用hrefattr 找到 id 设置为 的#sliderareas ul $(this).attr('href')。如果您需要该示例，我可以进行另一个 jsfiddle 编辑。

于 2012-12-05T19:31:39.467 回答
1

试试这个：

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

​</p>

于 2012-12-05T19:33:27.387 回答
0

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

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

将针对父 ul。

于 2012-12-05T19:23:46.127 回答