Question

我有一个带箭头图标的手风琴，指示某个部分何时打开和关闭。手风琴打开后，箭头指向下方，显示其下方的内容。

但是我创建了一个关闭按钮，该按钮会附加到每个部分。它位于手风琴每个部分的底部。

我想要它，这样一旦按下关闭按钮，箭头会将状态恢复为关闭状态。

$(function() {
$('#accordion h3').each(function(){ 
    var $set = $(this).nextUntil("h3");
    $set.wrapAll('<div />');
});

$('#accordion').accordion({ collapsible:true, active:true, heightStyle:"content", disabled:true, animated: false});
$('.ui-accordion-header').bind('click',function(){
    theOffset = $(this).offset();
    $(window).scrollTop(theOffset.top - 50);
});

$('#accordion h3.ui-accordion-header').click(function(){
    var _this = $(this);
    $('.ui-accordion-header-icon', _this).toggleClass('ui-icon-triangle-1-e ui-icon-triangle-1-s');
    _this.next().slideToggle();
    return false;
});

    $('.ui-accordion-content').append('<a href="#" class="close">Close</a><div class="clearfix"></div>');

    $('.close').click(function(){
        $(this).closest('.ui-accordion-content').toggleClass('ui-icon-triangle-1-s');
        $(this).parent().slideUp('slow', function(){
            $(window).scrollTop(theOffset.top - 50);
            var hidecollapsebutton = true;
            $('.ui-accordion-content').each(function(){
                if($(this).css('display') == 'block')
                {
                    hidecollapsebutton = false;
                }
            });

            if(hidecollapsebutton)
            {
                $('.accordion-expand-all').show();
                $('.accordion-collapse-all').hide();
            }

        });

        return false;
    })

});

非常感谢任何帮助。如果需要，我可以提供更多信息。感谢。

http://jsfiddle.net/EZT6A/

Answer 1

$('.close').click(function(){
    $(this).closest('.ui-accordion-content').toggleClass('ui-icon-triangle-1-s');

您可以通过一些简单的调试发现自己，$(this).closest('.ui-accordion-content')与此处的任何元素都不匹配。（这是因为您的关闭按钮在div.ui-accordion-content范围内，而h3.ui-accordion-header是该div元素的上一个兄弟。）

易于修复：转到父div（.ui-accordion-content），获取上一个h3（.ui-accordion-header），然后转到span（{{ 1}}）其中的元素：

.ui-accordion-header-icon

http://jsfiddle.net/EZT6A/2/

Answer 2

我尝试将click更改为on：

$(document).on("click", ".close", function(){
   //change arrow state
});

这是因为绑定.close事件时不存在每个click元素。

jQuery手风琴箭头图标与单独关闭按钮

2 个答案: