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

问题描述 投票：0回答：2

我可以在CSS中实现此目标，但是由于框架限制，我无法更改主菜单的HTML。

因此，我想出了一些jQuery，它显示了一个合适的子菜单，该子菜单取决于所悬停并定位的主菜单项。

问题是，当我将鼠标悬停在主菜单项之外并进入子菜单时，子菜单消失了。我不确定如何区分用户悬停在哪里的各种情况。

可能是从隐藏的存根中克隆子菜单HTML并将其插入相应的主菜单项并使用CSS实现隐藏/隐藏的情况。

这是主菜单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
2个回答
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（）;

0
投票

只需减小css中子菜单的顶部空白。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.