Question

在由href值href="javascript:animatedcollapse.toggle('ID')"指定的某些链接上选择时，我有一个表格下拉菜单。单击后，它将显示说明，并可以使用animatedcollapse.js插件按预期工作。

不起作用并试图合并的部分是，当单击带有<a>的{{1}}标签中的任何一个时，将箭头向上变换，它将指向该箭头（ href="javascript:animatedcollapse.toggle('AAA')"）具有与标识符相同的类名，然后在添加描述时通过添加类<a href="javascript:animatedcollapse.toggle('AAA')" class="link AAA"><span class="arrow"></span></a>将其转换回其默认值（.arrow）来操作该类名.arrow-up已折叠。

这是jsfiddle：https://jsfiddle.net/o2gxgz9r/73382/

HTML：

.arrow-down

CSS：

<tr>
    <td style="vertical-align:top; width:64px">
        <a class="AAA" href="javascript:animatedcollapse.toggle('AAA')">AAA</a>
    </td>
        <td style="vertical-align:top; width:585px">
        <a class="AAA" href="javascript:animatedcollapse.toggle('AAA')">Heading 1</a>
        <a href="javascript:animatedcollapse.toggle('AAA')" class="link AAA"><span class="arrow"></span></a>

        <p id="AAA" groupname="table-dropdown" speed="400" style="display: none;">DESCRIPTION - Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
    </td>
</tr>

JS：

.arrow {
   margin-left: 8px;
   border-right: 5px solid #000;
   border-bottom: 5px solid #000;
   width: 11px;
   height: 11px;
   transform: rotate(45deg);
   transition: .25s transform;
}
.arrow-up {
   transform: rotate(-135deg);
   transition: .25s transform;
}
.arrow-down {
   transform: rotate(0deg);
   transition: .25s transform;
}

Answer 1

$(document).ready(function(){
   animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    //$: Access to jQuery
    //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    //state: "block" or "none", depending on state
    }
    animatedcollapse.init();

    animatedcollapse.addDiv('AAA', 'fade=0,speed=400,group=table-dropdown,hide=1');
    animatedcollapse.addDiv('BBB', 'fade=0,speed=400,group=table-dropdown,hide=1');
    animatedcollapse.addDiv('CCC', 'fade=0,speed=400,group=table-dropdown,hide=1');

    // transform .arrow when show/hide collapse 
    var classID;
    $('a[href*="animatedcollapse"]').click(function(){ // detect any href with animatedcollapse clicked
        classID = $(this).attr('class'); // get the class name of the elememt that was clicked on
            $('.' + classID).find('.arrow').toggleClass('arrow-up'); // find class with .link and toggleClass its children with class name .arrow
        console.log(classID + ' was clicked!');
    });
});

此行：

$('.' + classID).find('.arrow').toggleClass('arrow-up');

Answer 2

我能够找出转换箭头，下面是工作示例：

$('a[href*="animatedcollapse"]').click(function(){ // detect any href with animatedcollapse clicked
    classID = $(this).attr('class'); // get the class name of the elememt that was clicked on
    if(classID.includes('link')) {
        $(this).children('.arrow').toggleClass('arrow-up');
    }
    else $('.' + classID).children('.arrow').toggleClass('arrow-up');
});

如何获取被单击的元素的类名并使用相同的类名来操纵其他元素？

2 个答案: