Question

我正在努力提高代码效率。所以我试图使用相同的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..

    })

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

由于

Answer 1

使用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..

})

fiddle here

或最简单的是next() ..（如果您确定元素始终位于h3元素旁边）

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

fiddle using next()

Answer 2

使用$(".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/

Answer 3

代码可以在手风琴级别捕获事件。然后，其他选择可以更容易确定范围。

$(".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 Fiddle： http://jsfiddle.net/Y3mKA/8/

在jQuery中定位特定的div

3 个答案: