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菜單 - 導航欄拒絕高亮父母后選擇子

回答

相關問題