CSS菜单 - 导航栏拒绝高亮父母后选择子

我知道这里有400线程，但它似乎像每个人的代码有点不同：我已经设置我的CSS，以便出现一个蓝色栏每当您将鼠标悬停在导航中的某个页面上，并且该链接页面被点击时，蓝色条就会停留在该页面上。当我用下拉菜单点击其中一个链接时，我无法将它留在父页面上。我能够在下拉列表中看到一个蓝色条（lol），但无法让它保留在父项中。我已经尝试了所有的祖先提示，所有菜单当前的提示，我只是在有趣的结局。我会永远感激任何帮助。CSS菜单 - 导航栏拒绝高亮父母后选择子

 /*** ----------------------------CHANGE THE COLOR OF THE SQUARES UNDERNEATH THE NAVIGATION BAR HERE ------------------------------- ***/ 
    nav ul li a:hover, nav ul li a.current { 
     border-bottom: 5px solid #00BCF2; 
     color: #00BCF2; 
    } 

    /*** THIS WILL PROBABILY GET US TO WHERE WE WANT TO BE WITH ADDING AND HOVERING THE PARENT LINK 



    nav ul li:hover > a, .current-menu-ancestor > a, .current-menu-parent > a { 
      background-color: #536f9e !important; 
      color: #ffffff !important; 
     } 
     ***/ 

    /*** add publications from box site level 1 here ***/ 
    /**** Dropdown ****/ 
    /*** ----------------------------- CHANGE THE LOGO OF THE DROPDOWN ARROW ------------------------------ ***/ 



    /*** ----------------------------- CHANGE THE height OF THE DROPDOWN menu ------------------------------ ***/ 

    .dropdown{ 
     padding: 14px 16px 37px 10px; 
     background: url('images/dropdown_icon.png') no-repeat 99% 21px; 
    } 
    .dropdown:hover{ 
     border-bottom: none; 
    } 
    nav ul ul{ 
     display: none; 
     margin: 0; 
     position: absolute; 
     background-color: #000; 
     z-index: 1; 

    } 
    nav ul li:hover ul{ 
     display: block; 
      opacity: 0.9; 


    } 
    nav ul li ul li{ 
     margin: 0; 



    } 
    /*** ----------------------------- CHANGE THE WIDTH OF THE DROPDOWN MENU ------------------------------ ***/ 
    nav ul li ul li a{ 
     margin: 0; 
     padding: 5px 10px; 
     width: 100px; 
    } 
    /*** ----------------------------- CREATE BLUE BARS INSIDE OF DROPDOWN ------------------------------ ***/ 

    nav ul li:hover ul li a:hover, nav ul li:hover ul li a.current{ 
     border-bottom: none; 
    }

按照要求，HTML我有我的开始 - >标题是：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>XXXXXX</title> 

    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" /> 

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script> 
    $(function(){ 
    $('a').each(function() { 
    if ($(this).prop('href') == window.location.href) { 
    $(this).addClass('current'); 
    } 
    <!--END OF HEADER --> 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="wrapper"> 

     <!--========================== L O G O & N A V B A R ============================--> 
     <header> 
      <div id="logo"> 
       <a href="home.html"><img src="images/xylophone.png" alt="YouRock" /></a> 
      </div> 
      <nav> 
       <ul> 
        <li><a href="home.html">Home</a></li> 
        <li><a href="about.html">About</a></li> 
        <li><a href="portfolio.html">Founders</a></li> 
        <li><a href="#" class="dropdown">Pipeline</a> 
         <ul> 
         <ul> 
          <li><a href="timeline.html">Timeline</a></li> 
          <li><a href="Phases.html">Phase I/II</a></li>

来源

2015-10-09 FR237

只是让我感到厌倦，您希望当前页面在菜单项下有一个蓝色条？ – Billy

确实。到目前为止，我所理解的是，当将鼠标悬停在下拉列表中时（例如时间轴），您想要在父级下拉类（例如Pipeline）上显示蓝条。你能证实这是预期的行为吗？ – PIIANTOM

@PIIANTOM不是当这个人徘徊，但当链接被点击。因此，当点击主页，关于，投资组合等时，我留下的蓝色栏位就位于它们下面。当我在我的下拉列表中点击一个链接时，我想让“管道”具有相同的蓝色下划线 – FR237

那么，检查活动链接是否在下拉框内的最简单方法是设置一个类。

<li class="drop-li"><a href="#" class="dropdown">Pipeline</a> 
     <ul> 
      <li><a href="timeline.html" class="dropdowned">Timeline</a></li> 
      <li><a href="Phases.html" class="dropdowned">Phase I/II</a></li> 
     </ul>

现在，您可以突出这样所需的父链接：

$(function(){ 
    $('a').each(function() { 
    if ($(this).prop('href') == window.location.href) { 
     if ($(this).attr('class') == 'dropdowned'){ 
      $(this).closest('.drop-li').children('a').addClass('current'); 
     } 
     else{ 
      $(this).addClass('current'); 
     } 
    } 
}

这样，它也可能设置一个类来<li>包含为了.dropdown链接可以轻松地实现它是有用的无论您有多少下拉菜单，链接和模板的名称是什么，都可以工作。

来源

2015-10-09 21:51:58 chem1st

对不起，我不认为@ chem1st有效， - 只是为了确认：所以，当点击Home，About，Portfolio等时，我留下的蓝色条就停留在它们下面。当我点击我的下拉菜单中的链接时，我想让“Pipeline”具有相同的蓝色下划线 - 以上这种情况下，我点击时看不到栏，例如说时间线。上传我拥有的整个CSS会有帮助吗？ – FR237

我明白你想要什么，我的代码就是这么做的。你做了一切正确吗？ – chem1st

你能告诉我到底在哪里实现CSS中的$（function）吗？在我上面展示的代码中的哪一行之后，您添加了以下内容 - 顺便说一下，我非常感谢您的帮助。我从来没有经历过一个公共论坛，在这个论坛中，如此热切地回答问题 - 在大多数论坛上，今天的问题都会带着令人厌恶的嘲讽言论 - 我希望有一天能够在我掌握更多技能后帮助别人！ – FR237

在timeline.html和phases.html把这个

<ul> 
 
        <li><a href="home.html">Home</a></li> 
 
        <li><a href="about.html">About</a></li> 
 
        <li><a href="portfolio.html">Founders</a></li> 
 
        <li><a href="#" class="dropdown" class="current">Pipeline</a> 
 
         <ul> 
 
         <ul> 
 
          <li><a href="timeline.html">Timeline</a></li> 
 
          <li><a href="Phases.html">Phase I/II</a></li>

，不要把它放在其余，et violla

来源

2015-10-09 21:18:19 Billy

在这种情况下，您将在每个“下拉页面”上有几个nav的公开导航。如果模板名称或导航栏会改变怎么办？ – chem1st

是菜单动态呢？ – Billy

如果（$（this）.prop（'href'）== window.location.pathname）作为你的一个链接是相对URL，那么window.location.href返回完整的url，因此永远不会匹配相关的url。 – Billy

CSS菜单 - 导航栏拒绝高亮父母后选择子

回答

相关问题