只將javascript函數應用於懸停的項目

Question

我有一個超大菜單，其中插入了許多菜單項目的聲音。其中一些菜單項有子菜單。我使用腳本打開子菜單語音的下拉菜單。

這是HTML代碼：

<div class="dropdownblock"> 
    <h5><a itemprop="url" href="#"><span itemprop="name">Dove Dormire</span></a></h5> 
    <div class="trianglesubmenu"></div> 
    <div class="submenublock container"> 
     <div class="col-xs-16 col-sm-8 col-md-4 col-lg-4"> 
      <a itemprop="url" href="#"><span itemprop="name">Hotel</span></a> 
      <a itemprop="url" href="#"><span itemprop="name">Agriturismo</span></a> 
      <a itemprop="url" href="#"><span itemprop="name">Campeggio</span></a> 
     </div> 
     <div class="col-xs-16 col-sm-8 col-md-4 col-lg-4"> 
      <a itemprop="url" href="#"><span itemprop="name">B&amp;B</span></a> 
      <a itemprop="url" href="#"><span itemprop="name">Country House</span></a> 
     </div> 
     <div class="col-xs-16 col-sm-8 col-md-4 col-lg-4"> 
      <a itemprop="url" href="#"><span itemprop="name">Appartamenti e Residence</span></a> 
      <a itemprop="url" href="#"><span itemprop="name">Residenze Alberghiere</span></a> 
      <a itemprop="url" href="#"><span itemprop="name">Case Vacanze</span></a> 
     </div> 
     <div class="col-xs-16 col-sm-8 col-md-4 col-lg-4"> 
      <a itemprop="url" href="#"><span itemprop="name">Camere Vacanze</span></a> 
      <a itemprop="url" href="#"><span itemprop="name">Ostelli</span></a> 
      <a itemprop="url" href="#"><span itemprop="name">Villaggi turistici</span></a> 
      <a itemprop="url" href="#"><span itemprop="name">Area Camper</span></a> 
     </div> 
    </div> 
</div> 
<div class="dropdownblock"> 
    <h5>Trasporti</h5> 
    <div class="trianglesubmenu"></div> 
    <div class="submenublock container"> 
     <div class="col-xs-16 col-sm-8 col-md-8 col-lg-8"> 
      <a itemprop="url" href="#"><span itemprop="name">Auto e Parcheggi</span></a> 
      <a itemprop="url" href="#"><span itemprop="name">Mezzi Pubblici</span></a> 
      <a itemprop="url" href="#"><span itemprop="name">Taxi</span></a> 
     </div> 
     <div class="col-xs-16 col-sm-8 col-md-8 col-lg-8"> 
      <a itemprop="url" href="#"><span itemprop="name">Noleggio auto</span></a> 
      <a itemprop="url" href="#"><span itemprop="name">Treno</span></a> 
      <a itemprop="url" href="#"><span itemprop="name">Aeroporto</span></a> 
     </div> 
    </div> 
</div> 

這是CSS代碼：

.visibletrianglesubmenu { 
    display: inherit; 
} 
.submenublock { 
    background: rgba(255, 255, 255, 1) none repeat scroll 0 0; 
    display: none; 
    height: auto !important; 
    left: 0; 
    margin: 0 auto; 
    overflow: visible !important; 
    padding: 20px !important; 
    position: fixed; 
    right: 0; 
    z-index: 1; 
} 

，這是JS代碼：

$(document).ready(function(){ 
    $('.dropdownblock').mouseover(function(){ 
     $('.submenublock').stop().slideDown(100); 
     $('.trianglesubmenu').addClass('visibletrianglesubmenu'); 
    }); 
    $('.dropdownblock').mouseout(function(){ 
     $('.submenublock').slideUp(100); 
     $('.trianglesubmenu').removeClass('visibletrianglesubmenu'); 
    }); 
}); 

現在，我該如何使用當用鼠標懸停時，僅將js函數應用於菜單元素的通用腳本？

實際上，只要我懸停任何菜單項，它就會將該函數應用於具有相同類的每個元素。

在此先感謝。

Answer 1

問題是因爲使用的是$('.submenublock')選擇所有具有相同類的元素，但你必須做的是find這是一個孩子this元素（懸停一個）元素：

$('.dropdownblock').mouseover(function(){ 
    $(this).find('.submenublock').stop().slideDown(100); 
    $(this).find('.trianglesubmenu').addClass('visibletrianglesubmenu'); 
}); 
$('.dropdownblock').mouseout(function(){ 
    $(this).find('.submenublock').slideUp(100); 
    $(this).find('.trianglesubmenu').removeClass('visibletrianglesubmenu'); 
}); 

Answer 2

您的代碼可以使用jQuery縮短.hover()

$(document).ready(function(){ 
    $('.dropdownblock').hover(function() { 
     $(this).find('.submenublock').stop().slideToggle(100); 
     $(this).find('.trianglesubmenu').toggleClass('visibletrianglesubmenu'); 
    }); 
});