悬停主菜单时子菜单可见，但悬停子菜单时需要保持可见答案

【问题标题】：Sub menu visible when hovering main menu but needs to remains visible when hovering the sub menu悬停主菜单时子菜单可见，但悬停子菜单时需要保持可见
【发布时间】：2011-07-08 22:09:07
【问题描述】：

我可以在 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();

        }
    );      

});

【问题讨论】：

请问您为什么要重新发明轮子？使用众多可用的菜单插件之一。
大部分依赖嵌套标记。我无法将子菜单嵌套在它们关联的父主菜单列表元素中。

标签： javascript jquery css hover show-hide

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试这个，我没有测试过，但我几乎可以肯定这会奏效：

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();

【讨论】：