Javascript 使用jQuery显示/隐藏_Javascript_Jquery

Javascript 使用jQuery显示/隐藏

javascript jquery

Javascript 使用jQuery显示/隐藏,javascript,jquery,Javascript,Jquery,我想显示或隐藏无序列表，基于某人单击标题的时间。我已经找到了一种方法来实现这一点，这对于一个列表来说很好。因为我有多个列表，所以效率不高。请原谅丑陋的表代码-在真实页面中不存在：我还在下面添加了假代码我正在使用其他人的代码，很不幸：我无法将类添加到无序列表中我无法更改无序列表的ID 我无法将无序列表作为其他列表项的子项（正如我在这里看到的一些其他问题）我可以控制小提琴中的“标题”代码和JS 你能给我一个更有效的方法来完成这件事吗？提前谢谢 <style> #s-lg-

我想显示或隐藏无序列表，基于某人单击标题的时间。我已经找到了一种方法来实现这一点，这对于一个列表来说很好。因为我有多个列表，所以效率不高。请原谅丑陋的表代码-在真实页面中不存在：

我还在下面添加了假代码

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

我无法将类添加到无序列表中
我无法更改无序列表的ID
我无法将无序列表作为其他列表项的子项（正如我在这里看到的一些其他问题）

我可以控制小提琴中的“标题”代码和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>


#s-lg-link-list-539480，#s-lg-link-list-539482{
显示：无；
}
$（文档）.ready（函数（）{
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（）；
}) 
});

如果您想概括操作，也许可以向每个

元素添加一个类，如“列表切换器”，还可以添加一个自定义

数据

属性，将它们映射到

ul

，如

数据关联列表=“#s-lg-link-list-539480”

。然后，您可以将JS简化为：

$(document).ready(function () {
  $('.listToggler').bind('click', function() {
      $($(this).data('associated-list')).slideToggle();
  });
});

但不确定这是否是您的问题。

您可以这样做：

你已经拥有的东西有什么问题吗？@blubberguy22：这很有效，但我怀疑这不是最有效的方法。

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