首页 文章

手风琴图标更改点击 - javascript

提问于
浏览
1

我现在的手风琴打开和关闭正常,并且按照我的意愿工作,但是关闭标签时图标不会正确改变 .

即使打开另一个选项卡,关闭上一个选项卡,是否有更改图标以匹配选项卡状态?

基本上图标应该在打开时显示减号,在关闭时显示加号,因此当点击打开标签时它会改变...

这里有一个JS小提琴,希望能更好地理解这一切... https://jsfiddle.net/wf2goy8s/4/

这是我的javascript:

jQuery(document).ready(function($) {
    var main_blc = $('.main-blc-accord');
    main_blc.find('dd').hide();
    main_blc.find('dd').prev().addClass('plus')
    main_blc.find('dd').first().prev().removeClass('plus');
    main_blc.find('dd').first().show();

    main_blc.find('dt').on('click', function(event) { 
        var dd=$(this).next('dd');
        main_blc.find('dd').not(dd).slideUp('slow');        
        dd.slideToggle();
        $(this).toggleClass('plus');    
    });

    $('.mobile-btn-menu').find('span').on('click', function(event) {
            $(this).parent().next('.footer-menu').toggleClass('show');
    });
});

3 回答

  • 0

    您可以尝试沿着这些行使用CSS . 我把它添加到你的小提琴中它起作用,除了.plus类最初没有应用,但你可以解决这个问题 .

    .plus h3:before {
        content: "+ ";
        color: blue;
    }
    
  • 0

    您可以跟踪它是否正在扩展,然后切换所有节点的加号,最后如果它正在扩展,请适当处理:

    main_blc.find('dt').on('click', function(event) { 
        var expanding = false
        if ($(this).attr('class')==='plus')
            expanding = true
        main_blc.find('dt').addClass('plus');
        var dd=$(this).next('dd');
        main_blc.find('dd').not(dd).slideUp('slow');        
        dd.slideToggle();
        if (expanding)
            $(this).removeClass('plus')
    });
    
  • 0

    也许你想试试这个:

    http://jsfiddle.net/30u0npss/3/

    <dl class="accordion">
        <dt><span>Title 1</span><i class="plus"></i></dt>
        <dd class="accordion_content">Content 1</dd>
        <dt><span>Title 2</span><i class="plus"></i></dt>
        <dd class="accordion_content">Content 2</dd>
        <dt><span>Title 3</span><i class="plus"></i></dt>
        <dd class="accordion_content">Content 3</dd>
    </dl>
    jQuery('.accordion dt').click(function() {
        jQuery(this).toggleClass('active').find('i').toggleClass('plus minus')
               .closest('dt').siblings('dt')
               .removeClass('active').find('i').removeClass('minus').addClass('plus');
    
              jQuery(this).next('.accordion_content').slideToggle().siblings('.accordion_content').slideUp();
    
    
    });
    
    jQuery('.accordion_content').hide();
    .plus:before{
       content:"+";
    }
    .minus:before{
       content:"-";
    }
    

相关问题