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 - ”]'）隐藏（）;

Answer 2

只需减小css中子菜单的上边距。

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

2 个答案: