Question

我试图在点击带有id spForumToggleIcon（＃）的图像的链接后切换多个div，特别是spGroupSubView（＃）。这可以在函数中完成吗？

<div class='spListSection'>
    <div class='spGroupViewSection'>
        <a id='spForumToggleIcon1' class='spToggleButton spRight' title='Click to expand forum group' rel='nofollow' href='#'><img src='images/sp_TogglePlus.png' alt=''/></a>
        <img id='spGroupHeaderIcon1' class='spHeaderIcon spLeft' src='' alt='' />
        <div id='spGroupHeaderName1' class='spHeaderName'>Group 1</div>
        <div style='clear: both;'></div>
        <div id='spGroupSubView1' class='spSubGroupView'>
            <div class='spGroupForumSection spOdd spUnreadPosts' id='topic1'> 
            </div>
            <div class='spGroupForumSection spOdd spUnreadPosts' id='topic2'> 
            </div>
            <div class='spGroupForumSection spOdd spUnreadPosts' id='topic3'> 
            </div>
        </div>
    </div>
    <div class='spGroupViewSection'>
        <a id='spForumToggleIcon3' class='spToggleButton spRight' title='Click to expand forum group' rel='nofollow' href='#'><img src='images/sp_TogglePlus.png' alt=''/></a>
        <img id='spGroupHeaderIcon3' class='spHeaderIcon spLeft' src='' alt='' />
        <div id='spGroupHeaderName3' class='spHeaderName'>Group 2</div>
        <div style='clear: both;'></div>
        <div id='spGroupSubView3' class='spSubGroupView'>
            <div class='spGroupForumSection spOdd spUnreadPosts' id='topic4'> 
            </div>
            <div class='spGroupForumSection spOdd spUnreadPosts' id='topic5'> 
            </div>
        </div>
    </div>
    <div class='spGroupViewSection'>
        <a id='spForumToggleIcon4' class='spToggleButton spRight' title='Click to expand forum group' rel='nofollow' href='#'><img src='images/sp_TogglePlus.png' alt=''/></a>
        <img id='spGroupHeaderIcon4' class='spHeaderIcon spLeft' src='' alt='' />
        <div id='spGroupHeaderName4' class='spHeaderName'>Group 3</div>
        <div id='spGroupSubView4' class='spSubGroupView'>
            <div class='spGroupForumSection spOdd spUnreadPosts' id='topic6'> 
            </div>
        </div>
    </div>
</div>

我只能从我所做的研究中得到一个div工作，我将非常感谢你的帮助。

谢谢

Answer 1

此代码将在.spSubGroupView div上执行slideToggle，与.spGroupViewSection相同的.spToggleButton。

$('.spToggleButton').click(function() {
    $(this).closest('.spGroupViewSection').find('.spSubGroupView').slideToggle();
});

你可以看到它在这里工作; http://jsfiddle.net/jfriend00/4Z8mY/

它的作用是：

在.spToggleButton个对象
从单击的对象开始，找到类spGroupViewSection的最近祖先。
在该项目中搜索与.spSubGroupView匹配的对象。
然后，在匹配的任何内容上调用.slideToggle()。

使用多个Div滑动切换

1 个答案: