Question

我正在一个网站上尝试实现以下目标：

当用户单击链接时，该链接将变为活动状态，并且匹配的子菜单也将变为活动状态。当用户将鼠标悬停在另一个链接上时，将不显示活动的子菜单。我已经实现了当前链接处于与URL匹配的活动状态，但是我无法显示匹配的子菜单。我对jQuery不太了解，所以我可能在不知道答案的情况下偶然发现了答案。这是网站当前位于localhost上的一些代码。

HTML：

<div class="menu-container-portal">
   <a class="toggle-menu" href="#" style="display: none;">
   <img src="/images/18.612e0c6d167074c5746476/1542016024414/menu-icon.png" alt="Meny"></a>
   <ul class="nav">
      <li class="">
         <a href="/upplevbesok.4.612e0c6d167074c5746203.html">Upplev &amp; Besök</a>
         <img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
         <ul class="sub">
            <div class="test1">
               <li class="">
                  <a href="/upplevbesok/bostader.4.612e0c6d167074c574620a.html">Bostäder</a>
               </li>
               <li>
                  <a href="/upplevbesok/evenemang.4.612e0c6d167074c574620d.html">Evenemang</a>
               </li>
               <li>
                  <a href="/upplevbesok/kopia1avupplevbesok.4.3f2c25fb16763705a3d1.html">Kopia (1) av Upplev &amp; Besök</a>
               </li>
               <li>
                  <a href="/upplevbesok/kopia4avbostader.4.612e0c6d167074c57461d6.html">Kopia (4) av Bostäder</a>
               </li>
               <li>
                  <a href="/upplevbesok/matochdryck.4.612e0c6d167074c57461f2.html">Mat och dryck</a>
               </li>
               <li>
                  <a href="/upplevbesok/shopping.4.612e0c6d167074c57461ca.html">Shopping</a>
               </li>
            </div>
         </ul>
      </li>
      <li>
         <a href="/boleva.4.612e0c6d167074c5746210.html">Bo &amp; Leva</a>
         <img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
         <ul class="sub">
            <div class="test1">
               <li>
                  <a href="/boleva/bostader.4.612e0c6d167074c57461c4.html">Bostäder</a>
               </li>
            </div>
         </ul>
      </li>
      <li> 
         <a href="/flyttahitjobba.4.612e0c6d167074c57461ed.html">Flytta hit &amp; Jobba</a>
      </li>
      <li>
         <a href="/naringsliv.4.612e0c6d167074c5746212.html">Näringsliv</a>
         <img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
         <ul class="sub">
            <div class="test1">
               <li>
                  <a href="/naringsliv/bostader.4.612e0c6d167074c5746216.html">Bostäder</a>
               </li>
            </div>
         </ul>
      </li>
      <li> 
         <a href="/kontaktaoss.4.612e0c6d167074c57461d1.html">Kontakta oss</a>
      </li>
   </ul>
</div>

CSS：

.menu-container-portal ul {
    margin: 0;
    padding: 0;
}

.active {
    background: #2b90f5;
    overflow: hidden;
}

.menu-container-portal li:hover>a {
    color: #fff;
    background: #304040;
    opacity: .7;
}

.menu-container-portal li {
    margin: 0;
    padding: 0;
    /*width: 100%;*/
    height: 15%;
    /*display: inline-block;*/
    ;
}

.menu-container-portal a {
    text-decoration: none;
}

.menu-container-portal a:hover {
    color: #dadcdf;
    background: #304040;
    padding-bottom: 10px;
}


/*.menu-container-portal {
    max-width: 900px;
    margin: 10px auto;
}*/


/*.menu-container-portal {
    max-width: 900px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-top: 20px;
    margin-left: 15px;
    white-space: nowrap;
     text-align:left;
} */

.menu-container-portal {
    max-width: 1100px;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 20px;
    /* margin-left: 15px; */
    white-space: nowrap;
    text-align: left;
    margin-left: 22.5%;
}

.toggle-menu {
    display: none;
    /*background: #404040;*/
    padding: 10px 15px;
    color: #fff;
}

.toggle-menu:hover {
    opacity: 0.7;
}

.nav {
    list-style: none;
    *zoom: 1;
    /*background:#404040;*/
    display: flex;
    justify-content: left;
}

.nav:before,
.nav:after {
    content: " ";
    display: table;
}

.nav:after {
    clear: both;
}

.nav ul {
    list-style: none;
    width: 100%;
    text-align: center;
}

.nav a {
    padding: 10px 15px;
    color: #101210;
    *zoom: 1;
}

.nav>li {
    float: left;
    z-index: 200;
}

.nav>li>a {
    display: inline-block;
}

.nav li ul {
    display: flex;
    position: absolute;
    left: -99999px;
    z-index: 100;
    width: 100%;
    /*height: 100%;*/
    padding-bottom: 0.5em;
    justify-content: left;
}

.nav li li a {
    display: block;
    /* display:inline-block; */
    /*background: #404040;*/
    /*position: relative;*/
    z-index: 99999;
    /*height: 100%;*/
    width: auto;
    /* width:100%; */
    color: #fff;
}

.nav li li li a {
    background: #404040;
    /*  z-index:200; */
    ;
}

.nav li {
    /*position: relative;*/
    ;
}

.nav>li.hover>ul,
.nav>li.hover>ul :active {
    left: 0;
    overflow: hidden;
}

.nav li li.hover ul {
    left: 100%;
    top: 0;
    overflow: hidden;
}

.arrow {
    display: none;
}

.sub {
    background: #304040;
    opacity: 0.9;
}

ul .sub {
    padding-top: 10px;
}

.menu-container-portal a:hover .nav li li li a {
    background: #ff0000;
}


/* Bestämma undermenyns storlek */

.sub2 {
    column-width: auto;
    text-align: left;
}

.test1 {
    display: inline-flex;
    margin-left: 22.5%;
}

.test1-show {
    display: block;
    margin-left: 22.5%;
    color: green !important;
}

jQuery：

$(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            /*$(".test1").addClass("active");
           $('.nav a').filter(function(){
              return this.href==location.href;}).parent()
           .addClass('active').siblings().removeClass('active');
           /*$(".nav > li > a").addClass("active");*/
            $(document).ready(function () {
                $('a(.active) a').hide();
                $('a(.active)').hover(
                    function () {
                        $('.test1').hide();
                    },
                    function () {
                        $('.test1').show();
                    });
            });
        }
    });
}

希望这是所有人理解我想要的并需要一些帮助或一些提示的所有代码：）我认为我掌握了一些jQuery代码，我觉得我只是其中的一些帮助:)预先感谢：）

我正在考虑使用我在这里找到的其中一种：

http://jsfiddle.net/4G7TJ/1/

http://jsfiddle.net/MGkQC/7/

2019年1月21日：我自己的帖子的最新动态：在经历了许多令人沮丧的时刻之后，我已经接近了自己的目标。但是，当我将鼠标悬停在另一个链接上时，仍然需要隐藏子菜单，这里是到目前为止的代码：

jQuery：

$(document).ready(function() {
$(".nav li [href]").each(function() {
    if (this.href == window.location.href) {
        $(this).css("background", "red");
       $(this).addClass("hover");
       $(this).parent().find('ul.sub').css("left","0");
    }
}); });

我当时正在考虑以某种方式使用.toggle，但实际上似乎无法使其正常工作。

Answer 1

希望您具有以下功能：

$("ul.nav > li > a").hover(
 function(e) {
  $('ul.nav > li > a.on-hover').removeClass('on-hover');
  $(this).addClass('on-hover');
 }, 
function(e){
 //If you expecting to hide on-hover-out as well, uncomment the below line
 //$('ul.nav > li > a.on-hover').removeClass('on-hover');
});

查看实际情况：http://jsfiddle.net/kn761qgL/并确认。

加载页面时显示具有匹配子菜单的活动父级jQuery

1 个答案: