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

JQuery hide/show not working as it should

本文关键字：常工作 工作 隐藏 显示 JQuery      更新时间：2023-09-26

我正试图制作一个下拉菜单，让它在点击时打开子菜单，在点击时关闭子菜单，但我甚至无法让它隐藏我的子菜单，从点击开始。

这是我的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端做错了什么？因为从我在这里看到的情况来看，这应该是有效的，但事实并非如此。

使用toggle()可能更有效：

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

示例Fiddle

$(document).ready(function(){
        $("#timeli").on('click', function()
          {
              $("#timeUlSub").toggle();          
          });
});
<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>

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

检查是否已链接Jquery。

试一下有条件使用：

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

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

相关文章：