Question

我有链接列表，如果你点击它们中的任何一个，它将在单独的div中切换显示/隐藏它下面的文本。如果显示其中一个，它也会隐藏所有其他div 此代码管理它：

$(document).ready(function(){
$('.targetDiv').hide();
    $('.hideshow').click(function () {
        $('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide('');
});});

这就是链接的样子

<a class="hideshow" target="1"><div class="cennikPlus"><i class="fa fa-plus-square"></i></div>Something something</a>

我需要做的是改变

fa-plus-square

到

fa-minus-square

打开和关闭时，关闭时。我发现“toggleClass”在这种情况下应该是有用的，但我不知道如何选择里面的div里面的

你能帮我解决这个问题吗？

该网站也是here

Answer 1

找到<i>并调用toggleClass

$(this).find("i").toggleClass("fa-plus-square fa-minus-square")

Answer 2

在jQuery中使用父子选择器非常简单......

$("a > div > i")

将选择i元素，即div元素的子元素，它是a元素的子元素。 http://www.w3schools.com/jquery/sel_parent_child.asp

如果元素不是直接后代，如示例所示，请删除大于号。

$("a div i")

Answer 3

To select the <i> inside your tag, you just do this:

$( this ).find( 'i' )

you can chain it all together to toggle the class--

$( this ).find( 'i' ).toggleClass( 'fa-plus-square fa-minus-square' )

and for siblings, if you want them all to have the class 'fa-minus-square', you do this:

$( this ).siblings().find( 'i' ).removeClass( 'fa-plus-square' ).addClass( 'fa-minus-square' )

Answer 4

好吧......这是我第一次将jQuery代码添加到现有代码中，所以我尝试做某事，它没有工作，所以我认为我做错了，但只是错误是选择“li”而不是“i”元素解决方法是在最后一行之前添加此行：

$(this).children('div').children('i').toggleClass("fa-plus-square fa-minus-square");

jQuery在子元素上切换类

4 个答案: