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隱藏/顯示不工作，因爲它應該

回答

相關問題