Question

我想显示或隐藏无序列表，具体取决于有人点击标题的时间。我找到了一种方法来做到这一点，这对于单个列表可以正常工作。由于我有多个列表，因此效率不高。请原谅丑陋的表格代码 - 实际页面中不存在：

我还在下面添加了假代码。

我正在使用其他人的代码，不幸的是：

我无法将类添加到无序列表
我无法更改无序列表的ID
我无法将无序列出其他列表项的子项（就像我在这里看到的其他一些问题一样）

我可以控制小提琴中的'heading'代码和JS。

你能告诉我一个更有效的方法吗？提前致谢。

<style>
#s-lg-link-list-539480, #s-lg-link-list-539482 {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var $list = $("#s-lg-link-list-539480");
var $list2 = $("#s-lg-link-list-539482");
$("#tog-link-1").bind('click', function () {
    $list.slideToggle();
})
$("#tog-link-2").bind('click', function () {
    $list2.slideToggle();
}) 
});
</script> 
<body>
<table border="1">
    <tbody>
        <tr>
            <td style="vertical-align: top;">
                <p><a href="#" id="tog-link-1">Heading 1</a>

                    <br /> <a href="#" id="tog-link-2">Heading 2</a>

                </p>
            </td>
            <td>
                <ul id="s-lg-link-list-539480">
                    <li><a href="http://www.one.com">One</a>

                    </li>
                    <li><a href="http://www.two.com">Two</a>

                    </li>
                    <li><a href="http://www.three.com">Three</a>

                    </li>
                </ul>
                <ul id="s-lg-link-list-539482">
                    <li><a href="http://www.four.com">Four</a>

                    </li>
                    <li><a href="http://www.five.com">Five</a>

                    </li>
                    <li><a href="http://www.six.com">Six</a>

                    </li>
                </ul>
            </td>
        </tr>
</table>
</body>

Answer 1

如果您想要概括操作，也许您可以为每个a元素添加类似“list-toggler”的类，也可以将自定义data属性映射到{{1和} ul一样。然后你可以简化你的JS，如：

data-associated-list="#s-lg-link-list-539480"

JsFiddle

不确定这是不是你的问题。

Answer 2

您可以执行以下操作：https://jsfiddle.net/eug7LLuq/5/

$(document).ready(function () {
    $("a[id^='tog']").bind('click', function (e) {
        var getIdNumber = e.target.id.slice(-1);
        $('ul:nth-child(' + getIdNumber + ')').slideToggle();
    })
});

使用jQuery显示/隐藏

2 个答案: