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');
    });
});

仅将javascript函数应用于悬停的项目

2 个答案: