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

Answer 2

＆＃13;

$(document).ready(function(){
        $("#timeli").on('click', function()
          {
              $("#timeUlSub").toggle();          
          });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

#timeUlSub是#timeli li的一部分。将其移到li之外。此外，jquery .slideToggle()是一种比.hide()更好的方法。

检查是否链接了Jquery。

Answer 4

尝试使用条件用法：

 $(document).ready(function(){

     $("#timeli").on('click', function(){
        if($("#timeUlSub").is(':hidden')){
           $("#timeUlSub").show();  
        } else {
           $("#timeUlSub").hide();  
        }  
     });

 });

Answer 5

<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>

#timeUlSub{
        display:none;
}

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

jsfiddle：http://jsfiddle.net/shellyjindal/rxb56emp/

JQuery隐藏/显示不能正常工作

5 个答案: