0

我正在努力使我的代码更有效率。所以我尝试使用同一行 jQuery 来创建切换。

我已经在我的页面上为 1 项工作。

我遇到的问题是单击要向下滑动的第二个项目时，它正在向下滑动第一个元素。

我创建了一个jsFiddle。演示我的问题。

我的jQuery如下....

// Accordion Related....
    $('h3.accordion-header').click(function()
    {
        $('.accordion').children().eq(1).slideToggle(function ()
        {
            $('h3.accordion-header').toggleClass('active', $(this).is(':visible'));
        });

        return false; // Prevent Default Click..

    })

我想知道如何定位特定类别的手风琴而不是页面上的第一个。如果它有可能？

谢谢

4

3 回答 3

2

使用this参考和closest()..

// Accordion Related....
$('h3.accordion-header').click(function () {
   $(this).closest('.accordion').children().eq(1).slideToggle(function () {
 //^^^^^^^^^^^^^^^^-----here 
     $(this).toggleClass('active', $(this).is(':visible'));
   });


   return false; // Prevent Default Click..

})

在这里摆弄

或者最简单的是使用next()..（如果你确定元素总是在元素旁边h3）

 $('h3.accordion-header').click(function () {
   $(this).next().slideToggle(function () {
      $(this).toggleClass('active', $(this).is(':visible'));
   });
     return false; // Prevent Default Click..
  });

小提琴使用 next()

于 2013-09-05T09:28:37.350 回答
1

随着$(".accordion")您选择所有手风琴元素，而不仅仅是您单击的元素内的那个。设置活动类时也会发生同样的情况。

此代码将起作用：

// Accordion Related....
    $('h3.accordion-header').click(function()
    {
        var currentClicked = $(this);
        currentClicked.parent().find(".row").slideToggle(function ()
        {
            currentClicked.toggleClass('active', $(this).is(':visible'));
        });

        return false; // Prevent Default Click..

    })

小提琴：http: //jsfiddle.net/Y3mKA/4/

于 2013-09-05T09:31:35.263 回答
1

该代码可以在手风琴级别捕获事件。然后可以更轻松地确定其他选择的范围。

$(".accordion").on("click", ".accordion-header", function()
{
    var that = this;
    $(".row", $(this).parents(".accordion")).slideToggle(function ()
    {
        $(that).toggleClass('active',  $(this).is(':visible'));
    });

    return false; // Prevent Default Click..
});

Js 小提琴：http: //jsfiddle.net/Y3mKA/8/

于 2013-09-05T09:41:13.503 回答