javascript - 仅将 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') 选择具有同一类的所有元素，但您要做的是找到该元素这是一个子 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');
});