javascript - JQuery 隐藏/显示无法正常工作

Question

我正在尝试制作一个下拉菜单，并让它在单击时打开子菜单并在单击时关闭它们，但我什至无法让它隐藏我的子菜单以开始单击。

这是我的 JQuery 代码:

$(document).ready(function(){
        $("#timeli").click(function(){
        $("#timeUlSub").hide();
    });});

这是我试图隐藏/显示的 html 代码

<div class="timeline">
            <ul>
                <li id="timeli">1996
                    <ul id="timeUlSub">
                        <li>
                            <p class="timeline-date">1997</p>
                            <p class="timeline-description">This is in the submenu</p>
                        </li>
                    </ul>
                </li>
                <li>1999</li>
                <li>2000</li>
                <li>2004</li>
                <li>2006</li>
                <li>2007</li>
            </ul>
        </div>

我在 jquery 端做错了什么吗？因为从我在这里看到的情况来看，这应该有效，但事实并非如此。

Answer 1

使用toggle()可能更有效:

    $("#timeli").click(function(){
        $("#timeUlSub").toggle();
    });

<强> Example Fiddle