ID不能再工作jQuery

我設計了一個下拉菜單，它工作正常。這是我的代碼，你也可以檢查我的代碼here。ID不能再工作jQuery

HTML

<div class="menu_option" id="hover-detail"><img src="images/menu_option_icon.jpg" alt=" " width="14" height="14" align="right" /> Menu Option 



     <ul> 
     <li><a href="#">link 1</a></li> 
     <li><a href="#">link 1</a></li> 
     <li><a href="#">link 1</a></li> 
     <li><a href="#">link 1</a></li> 
     <li><a href="#">link 1</a></li> 
     </ul> 

         </div>

jQuery的

$(document).ready(function() { 
    var Dropdown = { 
     timer: 0, 
     hide: function(callback, delay){ 
      console.log("hide"); 
      this.timer = setTimeout(function() { 
       return callback.call(this, arguments); 
     }, delay); 
     }, 
     reset: function(){ 
      console.log("reset"); 
      this.timer && clearTimeout(this.timer); 
     } 
    }; 
    $('#hover-detail ul').css('display', 'none'); 
    $('#hover-detail').hover(function() { 
     Dropdown.reset(); 
     $('#hover-detail ul').css({ 
      position: 'absolute', 
      top: '20px', 
      left: '0px', 
      zindex: '99999' 
     }); 
     $('#hover-detail ul').slideDown(); 
    }, function() { 
     Dropdown.hide(function(){ 
      $('#hover-detail ul').slideUp() 
     }, 200); 
    }); 
    $('#hover-detail').hover(function() { 
     Dropdown.reset(); 
    }, function(){ 
     Dropdown.hide(function(){ 
      $('#hover-detail ul').slideUp() 
     }, 200); 
    }); 
})

CSS

#hover-detail ul 
    { 
     margin:0; 
     padding:0; 
     border:solid 1px #666; 
     border-bottom:none; 

     } 
    #hover-detail ul li 
    { 
     list-style:none; 
     margin:0; 
     padding:0; 
     display:inline; 

     } 
    #hover-detail ul li a 
    { 
     text-decoration:none; 
     color:#333; 
     padding:2px 50px 2px 10px; 
     background:#F0F0F0; 
     border-bottom:1px solid #666; 
     /*line-height:25px;*/ 
     font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; 
     text-transform:capitalize; 
     display:block; 
     } 
    #hover-detail ul li a:hover 
    { 
     background:#CCC; 
     }

問題是，當我使用這個下降在不工作的頁面上再次發生向下效應。您可以檢查http://jsfiddle.net/avKsT/2/。

來源

2012-04-16 Kamal

** ID必須是唯一的**您不能在同一頁上使用相同的ID兩次。 – JJJ 2012-04-16 07:21:30

是的，你是對的，但是當我在類中打開它的ID也沒有工作，你可以在這裏看到'http：// jsfiddle.net/avKsT/5 /' – Kamal 2012-04-16 07:24:37

使用firebug獲取Javascript錯誤的詳細信息。 – 2012-04-16 07:29:45

ID屬性必須是唯一的。你不能使用同一個ID作爲多個html標籤。您可以使用類選擇器。

我更新您的代碼。你可以檢查這個。 http://jsfiddle.net/avKsT/17/

$(document).ready(function() { 
    var Dropdown = { 
     timer: 0, 
     hide: function(callback, delay){ 
      console.log("hide"); 
      this.timer = setTimeout(function() { 
       return callback.call(this, arguments); 
     }, delay); 
     }, 
     reset: function(){ 
      console.log("reset"); 
      this.timer && clearTimeout(this.timer); 
     } 
    }; 
    $('.hover-detail ul').css('display', 'none'); 
    $('.hover-detail').hover(function() { 
     Dropdown.reset(); 
     $('#hover-detail ul').css({ 
      position: 'absolute', 
      top: '20px', 
      left: '0px', 
      zindex: '99999' 
     }); 
     $(this).children('ul').slideDown(); 
    }, function() { 
     $(this).children('ul').slideUp(); 
    }); 
})

來源

2012-04-16 07:24:34 Yorgo

是的，你是對的，但是當我在類中打開它的ID也不起作用你可以在這裏看到http://jsfiddle.net/avKsT/5/ – Kamal 2012-04-16 07:27:20

我更新它檢查[鏈接]（http://jsfiddle.net/avKsT/17/） – Yorgo 2012-04-16 07:29:11

感謝@Yorgo現在它的工作正常，因爲我想感謝求助.. – Kamal 2012-04-16 07:42:59

Dom元素標識必須是唯一的。當您再次使用下拉菜單時，您將插入另一個具有相同ID「hover-details」的元素。改變第二個我想要的東西或使用類作爲您的邏輯選擇器。

來源

2012-04-16 07:24:15

是的，你是對的，但是當我在類中ID變成它也不工作，你可以在這裏看到'http：// jsfiddle.net/avKsT/5 /' – Kamal 2012-04-16 07:26:03

ID不能再工作jQuery

回答

相關問題