Question

当我点击aside时它工作正常，但当我在active上添加aside课程时，再点击它就无法正常工作。实际上我想在活动模式下点击aside时切换箭头。

<article class="headings">
    <p class="link">Link</p>
    <aside class="date">
        Date 
        <span class="fa fa-caret-down"></span>
    </aside>
    <aside class="page-views">
        Pageviews 
        <span class="fa fa-caret-down"></span>
    </aside>
    <aside class="comments"> 
         Comments 
        <span class="fa fa-caret-down"></span>
    </aside>
    <aside class="flikes">
        <i class="fa fa-facebook"></i> 
        Likes 
        <span class="fa fa-caret-down"></span>
    </aside>
    <aside class="fshares">
        <i class="fa fa-facebook"></i> 
        Shares 
        <span class="fa fa-caret-down"></span>
    </aside>
    <aside class="fcomments">
        <i class="fa fa-facebook"></i> 
        Comments     
        <span class="fa fa-caret-down"></span>
    </aside>
    <aside class="tweets">
        <i class="fa fa-facebook"></i> 
        Tweets 
        <span class="fa fa-caret-down"></span>
    </aside>
    <aside class="pins">
        <i class="fa fa-facebook"></i> 
        Pins 
        <span class="fa fa-caret-down"></span>
    </aside>
    <aside class="gpost">
        <i class="fa fa-facebook"></i>
        Posts 
        <span class="fa fa-caret-down"></span>
    </aside>
    <div class="clear"></div>
</article>

$('.headings aside').click(function() {
    $('.headings aside').removeClass('active');
    $(this).addClass('active')
    $('.headings aside').children('span.fa-caret-up').removeClass('fa-caret-up').addClass('fa-caret-down');
    $(this).children('span').removeClass('fa-caret-down').addClass('fa-caret-up');
});

$('.headings aside.active').click(function() {
    $(this).children('span').removeClass('fa-caret-down').addClass('fa-caret-up');
});

Answer 1

也许您需要创建动态/委派点击功能：

$(document).on('.click','.headings aside',function() {
    $('.headings aside').removeClass('active');
    $(this).addClass('active')
    $('.headings aside').children('span.fa-caret-up').removeClass('fa-caret-up').addClass('fa-caret-down');
    $(this).children('span').removeClass('fa-caret-down').addClass('fa-caret-up');
});

$(document).on('.click','.headings aside.active', function() {
    $(this).children('span').removeClass('fa-caret-down').addClass('fa-caret-up');
});

Answer 2

您可能需要撤消fa-caret-down fa-caret-up以满足您的需求

$('.headings aside').click(function() {
   $(this).toggleClass("active")
   $(this).children('span').toggleClass('fa-caret-down fa-caret-up');
});

使用类从一个标记中单击两次事件

2 个答案: