JQuery隐藏/显示不工作，因为它应该

我想做一个下拉菜单，并打开子菜单上点击并关闭它们点击，但我甚至不能让它隐藏我的子菜单开始点击。JQuery隐藏/显示不工作，因为它应该

这里是我的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结束了吗？因为从我看到的这里应该是有效的，但事实并非如此。

来源

2015-04-02 Alex Beyer

代码看起来还好。你确定你已经加载了'jQuery'吗？控制台错误？ – lshettyl 2015-04-02 20:05:46

使用toggle()可能更有效：

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

Example Fiddle

来源

2015-04-02 20:04:10 Und3rTow

谢谢，我知道切换是一种更好的方法，我只是试图让它隐藏起来，因为它没有做任何事情，当我点击它与切换。我没有正确引用图书馆。 – 2015-04-02 20:09:50

#timeUlSub是#timeli li的一部分。将它移动到li之外。另外，jquery .slideToggle()比.hide()更好。

检查您是否有Jquery链接。

来源

2015-04-02 20:05:43 TricksfortheWeb

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

来源

2015-04-02 20:06:40 Vim

谢谢你，我只是让Jquery没有正确链接导致问题。 – 2015-04-02 20:09:08

尝试了这一点有条件用法：

$(document).ready(function(){ 

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

});

来源

2015-04-02 20:18:07 ckpatel

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

来源

2015-04-03 08:26:19 Shelly

JQuery隐藏/显示不工作，因为它应该

回答

相关问题