Question

当我选择了SUBMENU时，我正在尝试突出显示菜单项目。我可以看到，当我没有子菜单时，下面的代码正在努力保持菜单项的选择。当我有一个带子菜单的菜单时，子菜单是唯一一个保持选中/突出显示菜单的菜单。

我尝试了不同的方法而没有成功，你能帮助我吗？谢谢。

HTML：

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Item 1</a>
        <ul class="sub-menu">
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>
        <ul class="sub-menu">
            <li><a href="#">Item 2.1</a></li>
            <li><a href="#">Item 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a>
        <ul class="sub-menu">
            <li><a href="#">Item 6.1</a></li>
            <li><a href="#">Item 6.2</a></li>
        </ul>
    </li>
</ul>

CSS：

  ul#menu, ul#menu ul.sub-menu {
        padding:0;
        margin: 0;
    }

    #menu {
        float: left;
        list-style: none outside none;
        padding-left: 20px;
        margin-top: 5px;

    }
    #menu li {
        border-right: 1px solid #7A0019;
        float: left;
        padding: 2px;
        font-size: 15px;
        position: relative;
    }
    #menu li a {
        color: #FFFFFF;
        display: block;
        padding: 5px 10px;
        text-decoration: none;
    }
    #menu li a:hover {
        background: none repeat scroll 0 0 #CCC;
        color: #000000;
        text-shadow: 0 0 5px #FFFFFF;
        z-index: 100;
    }

    #menu li a:active {
        background: none repeat scroll 0 0 #CCC;
        color: #000000;
        text-shadow: 0 0 5px #FFFFFF;
        z-index: 100;
    }



    #menu li ul {
        background-color: #7A0019;
        display: none;
        left: 0;
        position: absolute;
        top: 29px;
        z-index: 100;
    }

    #menu li:hover ul, #menu li.over ul {
        display: block;
    }

    #menu li ul li {
        border: 1px solid #7A0019;
        display: block;
        width: 130px;
        z-index: 50;

        -webkit-transition-delay:0.1s;     
        -moz-transition-delay:0.1s; 
        -ms-transition-delay:0.1s;     
        -o-transition-delay:0.1s;     
        transition-delay:0.1s;         
    }

.active_menu {      color: #000000 !important;
                    text-shadow: 0 0 5px #FFFFFF;
                    z-index: 100;
                    background-color: #FFCC33;
                    cursor:pointer !important;}

Jquery的：

$(function(){     
    var url = window.location.href; 
    $("#menu a").each(function() {
        if(url == (this.href)) { 
            $(this).closest("li").addClass("active_menu");
            $(this).closest("li a").css("color","#000");
        }
    });
});

解决方案：

经过这么多尝试后，终于找到了达到结果的简单方法。谢谢大家。

($(function () {
    var url = window.location.href;
    $("#menu a").each(function () {
        if (url == (this.href)) {
            $(this).closest(".menuHeader").children("a").addClass("active_menu");
            $(this).closest("li").addClass("active_menu");
            $(this).closest("li a").css("color", "#000");
        }
    });
});

谢谢Jesse，JEES和Gregg。

Answer 1

在这里，这种方式可能适合您。将类添加到父li，然后在hover / mouse out上添加/删除父li。

小提琴：https://jsfiddle.net/b56vy1w5/

<强> HTML

async

<强> JQUERY

<ul id="menu">
    <li class="menuHeader"><a href="#">Home</a></li>
    <li class="menuHeader"><a href="#">Item 1</a>
        <ul class="sub-menu">
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
        </ul>
    </li>
    <li  class="menuHeader"><a href="#">Item 2</a>
        <ul class="sub-menu">
            <li><a href="#">Item 2.1</a></li>
            <li><a href="#">Item 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a>
        <ul class="sub-menu">
            <li><a href="#">Item 6.1</a></li>
            <li><a href="#">Item 6.2</a></li>
        </ul>
    </li>
</ul>

Answer 2

好的，让我们希望这次能算出来，我的名字是JEES而不是Jesse：P .. 但是，这个例子不能在jsfiddle或S.O上完成。这里有一个链接显示它在行动中http://test.mi-creativity.com/highlight-parent/

所以我们基本上检查它是否是一个子项，取决于它是否最接近ul是否有sub-menu类，并在其上添加样式，这里是代码

JS： external.js

$(document).ready(function () {
    var url = window.location.href,
    websitename = "http://localhost/test/highlight-parent/";

    $("#menu a").each(function () {
        var href = $(this).attr("href");
        if( websitename == url){ 
            $("#homepage").addClass("active_menu");
            $("#homepage a").css("color","#000");
        }else if( websitename + href == url){
            if($(this).closest("ul").hasClass("sub-menu")){
                $(this).closest("#menu > li").addClass("active_menu");
            }else{       
                $(this).parent().addClass("active_menu");
            }
        }
    });
});

<强> HTML：

<ul id="menu">
    <li id="homepage"><a href="index.html">Home</a>
    </li>
    <li><a href="">Item 1</a>

        <ul class="sub-menu">
            <li><a href="subitem_1.1.html">Item 1.1</a>
            </li>
            <li><a href="subitem_1.1.html">Item 1.2</a>
            </li>
        </ul>
    </li>
    <li><a href="">Item 2</a>

        <ul class="sub-menu">
            <li><a href="subitem_2.1.html">Item 2.1</a>
            </li>
            <li><a href="subitem_2.2.html">Item 2.2</a>
            </li>
        </ul>
    </li>
    <li><a href="item_3.html">Item 3</a>
    </li>
    <li><a href="item_4.html">Item 4</a>
    </li>
    <li><a href="item_5.html">Item 5</a>
    </li>
    <li><a href="">Item 6</a>

        <ul class="sub-menu">
            <li><a href="subitem_6.1.html">Item 6.1</a>
            </li>
            <li><a href="subitem_6.2.html">Item 6.2</a>
            </li>
        </ul>
    </li>
</ul>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="external.js"></script>

<强> 更新： 额外的CSS：

我还添加了这个片段来摆脱影响所选菜单项颜色的文字阴影，并试图通过javascript无法将字体颜色设置为黑色，因此我们可以省略这两个javascript代码中的.css("color","#000");行：

.active_menu a{
   color:#000 !important;
   text-shadow:none;
}

Answer 3

如果我理解你想要做什么。您想要突出显示用户所在页面的菜单项，如果该菜单项位于子菜单中，则加上父菜单项。我看到有关在悬停和鼠标悬停上设置类的答案，我没有在你的问题或代码中看到有关悬停效果的任何内容。所以我只是想确保我明白你想要做什么。

这样的事情应该这样做。而不是循环遍历所有寻找具有匹配url的锚点的锚点，只需使用选择器来查找它。（另）：

$(function(){     
    var url = window.location.href; 
    // get the active link by looking for the anchor matching the url
    var $active = $('#menu a[href=' + url + ']');
    // get a reference to the li wrapping the anchor
    var $li = $active.closest("li");
    // add the active_menu Class to the li
    $li.addClass("active_menu");
    // set the color of the active Anchor
    // although I'd use the stylesheet: li.active_menu a { color: #000; }
    $active.css("color","#000");

    // Check the UL parent of the li for the class 'sub-menu'
    if($li.parent().hasClass('sub-menu')){
        // if it is a sub-menu find the li wrapping the sub-menu and add the active_menu class
        $li.parent().closest("li").addClass('active_menu');
    }

});

Answer 4

我的答案只适用于您的HTML，只需替换：

$(this).closest("li").addClass("active_menu");
$(this).closest("li a").css("color","#000");

使用：

$("#menu li").has("a[href='" + this.href + "']").addClass("active_menu");
$("#menu li").has("a[href='" + this.href + "']").css("color","#000");

工作示例：

http://codepen.io/anon/pen/VvxaMg

突出显示菜单父级

4 个答案: