javascript - 加载页面时显示具有匹配子菜单的事件父级 jQuery

Question

我在一个网站上工作，我试图实现以下目标:

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

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

希望这就是你们理解我想要什么并需要一些帮助或一些提示所需的全部代码:)帮助 :) 提前致谢 :)

我正在考虑使用我在这里找到的其中一个:

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

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

2019 - 01 - 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/并确认。