在jquery中切换li

时间:2013-08-23 07:06:35

标签: jquery html-lists toggle

我有以下列表:

<ul id="tree" class="main-bur-list">
    <li class="top-role-list role_ABM">
        <div class="bu-represent-role" data-sbu_id="6" data-bu_id="1" data-role="2" data-user_id="189984" data-isfetched="1">abhishek.j@asda(ABM - PMP, CISSP - East Coast)</div>
        <ul id="tree" class="main-bur-list">
            <li class="top-role-list role_TL">
                <div class="bu-represent-role" data-sbu_id="6" data-bu_id="1" data-role="3" data-user_id="141590" data-isfetched="1">irfanbaig@gfdgdf(TL - PMP, CISSP - East Coast)</div>
                <ul id="tree" class="main-bur-list">
                    <li class="top-role-list role_ISM">
                        <div class="bu-represent-role" data-sbu_id="6" data-bu_id="1" data-role="4" data-user_id="185359" data-isfetched="0">neelamtest2112@gmail.com(ISM - PMP, CISSP - East Coast)</div>
                    </li>
                    <li class="top-role-list role_ISM" style="display: list-item;">
                        <div class="bu-represent-role" data-sbu_id="6" data-bu_id="1" data-role="4" data-user_id="164909" data-isfetched="0">mohan.krishna@dggdfm(ISM - PMP, CISSP - East Coast)</div>
                    </li>
                    <li class="top-role-list role_ISM" style="display: list-item;">
                        <div class="bu-represent-role" data-sbu_id="6" data-bu_id="1" data-role="4" data-user_id="174582" data-isfetched="0">ritwik.m@sdfsd(ISM - PMP, CISSP - East Coast)</div>
                    </li>
                    <li class="top-role-list role_ISM" style="display: list-item;">
                        <div class="bu-represent-role" data-sbu_id="6" data-bu_id="1" data-role="4" data-user_id="194026" data-isfetched="0">Wasim.s@fdsfs(ISM - PMP, CISSP - East Coast)</div>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="top-role-list role_ABM">
        <div class="bu-represent-role" data-sbu_id="9" data-bu_id="1" data-role="2" data-user_id="176794" data-isfetched="0">sachin.k@dfsfsd(ABM - CTFL, Cloud, Prince 2, FRM, CFA (All US))</div>
    </li>
    <li class="top-role-list role_ABM">
        <div class="bu-represent-role" data-sbu_id="7" data-bu_id="1" data-role="2" data-user_id="189984" data-isfetched="0">abhishek.j@dasdas(ABM - PMP, CISSP - West Coast)</div>
    </li>
    <li class="top-role-list role_ABM">
        <div class="bu-represent-role" data-sbu_id="7" data-bu_id="1" data-role="2" data-user_id="189984" data-isfetched="0">abhishek.j@dasdsa(ABM - PMP, CISSP - West Coast)</div>
    </li>
</ul>

所有ul和li都是动态创建的。现在,如果我点击li,那么孩子li(s)应该切换。我正在尝试使用以下代码,但它不起作用:

$('.bu-represent-role').click(function(){
        $('.main-bur-list ul li').next().toggle();
});

如何排序此问题?

更新: http://jsfiddle.net/srimanta12/F4apy/

3 个答案:

答案 0 :(得分:1)

您必须使用.on方法。 JSFIDDLE

$('body').on('click', '.bu-represent-role', function (e) {
    $(e.target).next().toggle();
});

答案 1 :(得分:0)

由于您要动态生成ulli s,click将无效。请改用on -

$(document).on('click', '.bu-represent-role', function(){
    $('.main-bur-list ul li').next().toggle();
});

答案 2 :(得分:0)

有一些错误,但它的工作原理如下:

$(document).on('click', '.bu-represent-role', function (e) {
    $(e.target).next().toggle();
});

http://jsfiddle.net/F4apy/2/