Question

DEMO

下面是一个简单的工作手风琴的例子。

HTML

<div class="Accordian">
    <div class="Btn">BUTTON
        <div class="Icn"><i class="Up"></i></div>
    </div>
    <div class="Content">CONTENT</div>
</div>

JQUERY

$(function ($) {
    $('.Accordian').find('.Btn').click(function () {
        var $content = $(this).siblings('.Content').slideToggle('fast');
        $('.Content').not($content).slideUp('fast');
        //How to toggle only child of clicked?
        $('.Icn i').toggleClass('Up').toggleClass('Down');            
    });
});

问题很简单。课程 .Up / .Down 将是点击时切换的css图标。目前，我的代码切换了所有名为up / down的类。

问题

如何仅定位所点击元素的子类并应用适当的类？

我怀疑它应该如何运作：

onclick
If accordian closed

 - Apply class .Up to clicked element.  
 - Apply class .Down to all closed elements. 

Else

 - Vice versa

Answer 1

在点击的元素上下文中查找元素.Icn i。您需要使用：

$('.Icn i').not($(this).find('.Icn i')).removeClass('Down').addClass('Up');
$(this).find('.Icn i').toggleClass('Up').toggleClass('Down');

<强> Working Demo

Jquery手风琴：如何只定位被点击元素的子类？

DEMO

1 个答案: