在由其 href 值 href="javascript:animatedcollapse.toggle('ID')"
指定的某些链接上选择时,我有一个表格下拉列表.单击时,它将显示描述并使用 animatedcollapse.js 插件按预期工作。
不起作用并且我试图合并的部分是在任何 <a>
时向上转换箭头用 href="javascript:animatedcollapse.toggle('AAA')"
标记被点击,它会指向这个箭头(<a href="javascript:animatedcollapse.toggle('AAA')" class="link AAA"><span class="arrow"></span></a>
)与标识符相同的类名,然后操作那个类名.arrow
通过添加类 .arrow-up
在描述折叠时将其转换回默认值 ( .arrow-down
)。
这是 jsfiddle:https://jsfiddle.net/o2gxgz9r/73382/
HTML:
<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>
CSS:
.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;
}
JS:
// 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('.link').children('.arrow').toggleClass('arrow-up'); // find class with .link and toggleClass its children with class name .arrow
console.log(classID + ' was clicked!');
});
最佳答案
$(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');
关于javascript - 如何获取被点击元素的类名并使用相同的类名来操作其他元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52527628/