悬停在主菜单上时子菜单可见，但悬停在子菜单上时需要保持可见

Question

我可以在 CSS 中实现这一点，没有任何问题，但由于框架限制，我无法更改主菜单的 HTML。

因此，我想出了一些 jQuery，它根据悬停并定位它的主菜单项显示适当的子菜单。

问题是，当我将鼠标悬停在主菜单项之外并进入子菜单时，子菜单消失。我不确定如何区分用户悬停位置所出现的各种场景。

可能的情况是，我从我拥有的隐藏存根中克隆子菜单 HTML，并将其插入到适当的主菜单项中，并使用 CSS 实现 hosw/hide。

这是主菜单 html：

<ul class="nav-list">
  <li class="nav-first nav-linkitem 356">
    <a title="" href="/"><span class="nav-tlt">Home</span></a>
  </li>
  <li class="nav-linkitem 357">
    <a title="" href="/Channels/Chemicals"><span class="nav-tlt">Chemicals</span></a>
  </li>
  <li class="nav-linkitem 358">
    <a title="" href="/Channels/Energy"><span class="nav-tlt">Energy</span></a>
  </li>
  <li class="nav-linkitem 359">
    <a title="" href="/Channels/Fertilizers"><span class="nav-tlt">Fertilizers</span></a>
  </li>
  <li class="nav-linkitem 383">
    <a title="QA test" href="/QA"><span class="nav-tlt">QA</span></a>
  </li>
  <li class="nav-last nav-linkitem 384">
    <a title="QA2 test" href="/QA2"><span class="nav-tlt">QA2</span></a>
  </li>
</ul>

这是子菜单 HTML：

<!-- Chemicals -->
<div id="subNav-chemicals">
    <div>
        <h4>Our most popular Chemical reports</h4>
        <ul class="reportList">
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
        </ul>
        <ul class="reportList">
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
        </ul>
        <ul class="reportList">
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
            <li><a href="#">Chemical name</a></li>
        </ul>
    </div>
    <div>
        <h4>Popular destinations</h4>
        <ul class="captionList">
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Free Whitepaper - "Budgeting for the new normal"</a></p>
            </li>       
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">ICB magazine</a></p>
            </li>
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Free trial</a></p>
            </li>       
        </ul>
    </div>
</div>
<!-- Chemicals: END -->
<!-- Energy -->
<div id="subNav-energy">
    <div>
        <h4>Our most popular Energy reports</h4>
        <ul class="reportList">
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
        </ul>
        <ul class="reportList">
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
        </ul>
        <ul class="reportList">
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
            <li><a href="#">Energy name</a></li>
        </ul>
    </div>
    <div>
        <h4>Popular destinations</h4>
        <ul class="captionList">
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Free Whitepaper - "The light that shines twice as bright"</a></p>
            </li>       
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Energy blog</a></p>
            </li>
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Free trial</a></p>
            </li>       
        </ul>
    </div>
</div>
<!-- Energy: END -->
<!-- Fertilizer -->
<div id="subNav-fertilizers">
    <div>
        <h4>Our most popular Fertilizer reports</h4>
        <ul class="reportList">
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
        </ul>
        <ul class="reportList">
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
        </ul>
        <ul class="reportList">
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
            <li><a href="#">Fertilizer name</a></li>
        </ul>
    </div>
    <div>
        <h4>Popular destinations</h4>
        <ul class="captionList">
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Free Whitepaper - "Fertilization in today's market"</a></p>
            </li>       
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Fertilizer blog</a></p>
            </li>
            <li>
                <img class="figure" alt= "" />
                <p class="caption"><a href="#">Free trial</a></p>
            </li>       
        </ul>
    </div>
</div>
<!-- Fertilizer: END -->

和 jQuery：

$(function(){

    var subNav = $('.rtx-SubNav'),
    mainNav = $('.nav-SiteNav'),
    mainNavHeight = mainNav.outerHeight(),
    mainNavOffset = mainNav.offset(),
    coordinates = [],
    splitCoordinates = [],
    subNavID = []
    linkWidth = [];

    // get widths of previous links 
    $('.nav-SiteNav a').each(function(index){

        var $this = $(this),
        $thisWidth = $this.parent().outerWidth(),
        offset = $this.offset(),
        offsetTop = Math.round(offset.top + mainNavHeight) + 'px',
        offsetLeft = Math.round(offset.left) + 'px';

        coordinates.push(offsetTop + '-' + offsetLeft);

        linkWidth.push($thisWidth);

        linkWidth.reverse();

    });

    // get IDs of   
    $('.rtx-SubNav div[id^="subNav-"]').each(function(index){

        $(this).hide();

        var divID = $(this).attr('id');
        subNavID.push(divID);
        subNavString = subNavID.toString(),
        len = subNavID.length;

        while(len--){
           subNavString = subNavString.replace('subNav-', '');
        }

    });

    subNavID = subNavString.split(',');

    // check the text against IDs 
    // show matched, hide others
    // position by hovered link
    // remain visible when hovering sub nav
    $('.nav-SiteNav a').hover(  
        function() {

            var $this = $(this),
            linkTxt = $this.text().toLowerCase(),
            hoverOffset = $this.offset(),
            linkIndex = $('.nav-SiteNav a').index($this),
            splitCoordinates = coordinates[linkIndex].split('-'),
            len = subNavID.length,
            total = 0,
            sliced = linkWidth.slice(0, linkIndex),
            slicedLen = sliced.length;

            while(slicedLen--){
                var numericVal = parseInt(sliced[slicedLen]);
                total += numericVal;                
            }

            while(len--){
                if (linkTxt === subNavID[len]){
                    $('.rtx-SubNav #subNav-' + linkTxt).show(); 
                }   
            }

            subNav.css({
                'top': '257px',
                'left': total + 'px'
            });

        },
        function() {

            subNav.removeAttr('style');

            $('.rtx-SubNav div[id^="subNav-"]').hide();

        }
    );      

});

Answer 1

试试这个，我没有测试它，但我几乎确定这会起作用：

var parent_a, parent_a_id, li_pos;
$('.subnav li').hover(function(){
    parent_a = $('a',this).attr('href').toLowerCase();
    parent_a_id = parent_a.split('/').pop().toString();
    li_pos = $(this).offset();
    $('#subNav-' + parent_a_id ).css({'left' : li_pos.left, 'top' : li_post.top}).stop(true, true).show();
}, function(e){
    $('#subNav-' + parent_a_id ).hide();

});
$('div[id^="subNav-"]').hide();

Answer 2

只需减少 css 中子菜单的 margin-top 即可。