Question

不确定我是否已经很好地提出了我的问题，希望细节能够涵盖这些问题。

所以，我正在建造一个人造的＆＃34;全高幻灯片式子菜单，我在那里有一个空容器：

<section class="masking_sublevel">

</section>

此外，我的HTML中有一堆ul元素，默认情况下隐藏在其包含的部分中：

我用更完整的文章更新 HTML部分：

<div id="sldbr_overlay" class="newully">
        <section class="masking_sublevel">

        </section>
        <ul class="sidebar_bumenu">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    Beauty <i class="fa fa-chevron-right bu_chevright"></i>
                           <i class="fa fa-chevron-down bu_chevdown"></i>
                </a>
                    <section class="hidden_ul">
                    <ul>
                        <li><a href="#">Aerobics</a></li>
                        <li><a href="#">Pilates</a></li>
                        <li><a href="#">Yoga</a></li>
                        <li><a href="#">Massage</a></li>
                        <li><a href="#">Peeling</a></li>
                        <li><a href="#">Bikini Area Sugaring</a></li>
                        <li><a href="#">Piercing</a></li>
                        <li><a href="#">Tattoo</a></li>
                        <li><a href="#">Shaping</a></li>
                        <li><a href="#">Sauna</a></li>
                        <li><a href="#">Mud SPA</a></li>
                        <li><a href="#">Needle Therapy</a></li>
                        <li><a href="#">Shaping</a></li>
                        <li><a href="#">Leech Therapy</a></li>
                        <li><a href="#">Thai Massage</a></li>
                        <li><a href="#">Wushu</a></li>
                    </ul>
                    </section>
            </li>
            <li><a href="#">Clothing</a></li>
            <li><a href="#">Computers</a></li>
            <li><a href="#">Construction</a></li>
            <li><a href="#">Entertainment</a></li>
            <li><a href="#">Financial</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    Food <i class="fa fa-chevron-right bu_chevright"></i>
                         <i class="fa fa-chevron-down bu_chevdown"></i>
                </a>
                <ul class="hidden_ul">
                    <li><a href="#">Pizza</a></li>
                    <li><a href="#">Cheboorackee</a></li>
                    <li><a href="#">Khash</a></li>
                    <li><a href="#">Pork</a></li>
                    <li><a href="#">Hamburgers</a></li>
                    <li><a href="#">Greek Salad</a></li>
                    <li><a href="#">BBQ</a></li>
                    <li><a href="#">Tortillas</a></li>
                    <li><a href="#">Spaghetti</a></li>
                    <li><a href="#">Pasta</a></li>
                    <li><a href="#">Ice Cream</a></li>
                    <li><a href="#">Jelly Sugar</a></li>
                    <li><a href="#">Lolly Pop</a></li>
                    <li><a href="#">Cupcakes</a></li>
                </ul>
            </li>
            <li><a href="#">Health</a></li>
            <li><a href="#">Kids</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Travel</a></li>
            <li><a href="#">Tourism</a></li>
        </ul>
        <div class="pzik">
            <a href="javascript:void(0);" data-toggle=".sidebar_wrapper" id="sidebar-toggle_abs">
                <img src="svg/filter.svg" class="filter_icon hvr-wobble-bottom">
            </a>
            <a href="javascript:void(0);" id="go-2-top" class="gotop_chevron">
                <i class="fa fa-chevron-up"></i>
            </a>
        </div>
    </div>

所以，我正在做的是选择上面提到的ul并将其放在悬停事件的空白部分中并在鼠标上清空它，如下所示：

$(document).ready(function(){

    var dropdownLi = $('li.dropdown');
    var maskingSubLvl = $('.masking_sublevel');
    var importedUl = $('.masking_sublevel ul');

    var hiddenUl = $('.hidden_ul ul');


    $(dropdownLi).on('mouseover',function(){

        $(hiddenUl).appendTo(maskingSubLvl);
        $(maskingSubLvl).css('display','block');

    });

    $(dropdownLi).on('mouseleave',function(){
        $(maskingSubLvl).css('display','none');
        $(importedUl).empty();

    $(maskingSubLvl).on('mouseenter',function(){
            $(this).css('display', 'block');

    });

  });

});

问题在于，使用这段代码，我可能只选择ul类.hidden_ul'，因为当我将鼠标悬停在其他项目上时（随机），它会继续加载第一个列表的内容。如何选择与我目前正在悬停的同一班级的非常ul元素？

谢谢！

Answer 1

因此，您希望从具有鼠标悬停的元素遍历到父级ul，这是祖父.hidden_ul

的子级

// remove this, it has no context to each drop down 
// var hiddenUl = $('.hidden_ul ul');

$(dropdownLi).on('mouseover',function(){
    $(this).closest('.hidden_ul').children('ul').appendTo(maskingSubLvl);

    // though if there are no child uls in your lis, this will do
    $(this).closest('ul').appendTo(maskingSubLvl);

Answer 2

由于hidden_ul是child的直接.dropdown，您需要使用其父上下文获取它，如下所示：

$(dropdownLi).on('mouseover',function(){
    var hiddenUl=$(this).find('.hidden_ul')[0];//find the child
    $(hiddenUl).appendTo(maskingSubLvl);
    $(maskingSubLvl).css('display','block');
});

<强>更新

而不是appendTo尝试不断更改html .maskingSubLvl，以便在添加其他内容之前无需再次删除内容。对于Ex：

<强> DEMO

$(document).ready(function(){
    var dropdownLi = $('li.dropdown');
    var maskingSubLvl = $('.masking_sublevel');
    var importedUl = $('.masking_sublevel ul');

    $(dropdownLi).on('mouseover',function(){
        $(maskingSubLvl).css('display','block');
        var hiddenUl = $(this).find('.hidden_ul ul').clone(); //clone the content
        $(maskingSubLvl).html(hiddenUl);
    });

    $(dropdownLi).on('mouseleave',function(){
        $(maskingSubLvl).css('display','none');
    });

    $(maskingSubLvl).on('mouseenter',function(){
            $(this).css('display', 'block');
    });
});

jQuery：如何选择同一个类的确切元素？

2 个答案: