Question

我需要的是切换？单击父无序列表中的链接时，另一个列表标记内的无序列表。我不想为此使用id选择器。

我的HTML代码：

<ul>
    <li><a href="#">Dashboard</a></li>
    <li>
        <a href="javascript:void(0);">Members</a>
    </li>
    <li>
        <a href="javascript:void(0);" href="#sm"> Chit Management </a>
        <ul id="sm" class="sub-menu collapse" style="list-style:none;">
            <li><a href="#">Create Account</a></li>
            <li><a href="#">Create Account</a></li>
        </ul>
    </li>
    <li><a href="javascript:void(0);" href="#sm1"> Collection Management </a>
        <ul id="sm1" class="sub-menu collapse" style="list-style:none;">
            <li><a href="#">Create Account</a></li>
            <li><a href="#">Create Account</a></li>
        </ul>
    </li>
    <li><a href="javascript:void(0);" href="#sm1">Cash Book Management </a></li>
        <ul id="sm1" class="sub-menu collapse" style="list-style:none;">
            <li><a href="#">Create Account</a></li>
            <li><a href="#">Create Account</a></li>
        </ul>
    </li>
    <li><a href="#"> Reports</a></li>
</ul>

Answer 1

如果您不想使用id-selector，可以使用class-selector。

示例 http://jsfiddle.net/npeagg4v/

另一种方式 - 只使用html标签，但这是冒险的，因为你可以在将来做出一些改变，逻辑就会被打破。

    $('li a').unbind('click').click(function(){
       $(this).closest('li').find('ul').toggle();

       return false;
});

示例 http://jsfiddle.net/npeagg4v/1/

关于Jquery文档的链接：http://api.jquery.com/toggle/（toggle）和http://api.jquery.com/closest/（closest）

Answer 2

Jsfiddle：http://jsfiddle.net/mydnygk3/1/

$("ul a").click(function () {
    $(this).siblings("ul").toggleClass("collapse");
});

另见：

http://api.jquery.com/siblings/

http://api.jquery.com/toggleclass/

注意：在click（）选择器上使用class或id可使效果更具体。

Answer 3

您可以使用.toggle()功能，也可以在其中添加一些平滑度或动画：

$("ul a").click(function () {
    $(this).siblings("ul").toggle("fast");
});

LIVE DEMO

单击链接时切换<ul>列表</ul>

3 个答案: