使用數據的下拉菜單 - 顯示子菜單

我必須使用導航菜單的日期打開子菜單，並顯示其匹配的鏈接。我無法更改HTML。我有沒有絲毫的想法如何做到這一點使用「數據相關面板」有人幫助我？使用數據的下拉菜單 - 顯示子菜單

<!-- nav menu --> 
<nav> 
     <ul> 
     <li><a href="#" data-related-panel="space">Space</a></li> 
     <li><a href="#" data-related-panel="earth">Earth Science</a></li> 
     <li><a href="#" data-related-panel="technology">Technology</a></li> 
     <li><a href="#" data-related-panel="physics">Physics</a></li> 
     <li><a href="#" data-related-panel="gallery">Gallery</a></li> 
     </ul> 
</nav> 

<!-- dropdown --> 
<div id="dropdown"> 

    <section id="space" class="nav-panel"> 
     <ul> 
     <li><a href="#">Missions</a></li> 
     <li><a href="#">Technology</a></li> 
     <li><a href="#">Aeronautics</a></li> 
     <li><a href="#">Education</a></li> 
     <li><a href="#">History</a></li> 
     </ul> 
    </section> 

    <section id="earth" class="nav-panel"> 
     <ul> 
     <li><a href="#">Geology</a></li> 
     <li><a href="#">Oceanography</a></li> 
     <li><a href="#">Meteorology</a></li> 
     <li><a href="#">Weather</a></li> 
     <li><a href="#">Projects</a></li> 
     </ul> 
    </section> 

    <section id="technology" class="nav-panel"> 
     <ul> 
     <li><a href="#">Music</a></li> 
     <li><a href="#">Machines</a></li> 
     <li><a href="#">Computers</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Projects</a></li> 
     </ul> 
    </section> 

    <section id="physics" class="nav-panel"> 
     <ul> 
     <li><a href="#">Relativity</a></li> 
     <li><a href="#">Quantum mechanics</a></li> 
     <li><a href="#">Electromagnetism</a></li> 
     <li><a href="#">Thermodynamics</a></li> 
     </ul> 
    </section> 

    <section id="gallery" class="nav-panel"> 
     <ul> 
     <li><a href="#">Featured Photos</a></li> 
     <li><a href="#">Photos</a></li> 
     <li><a href="#">Contests</a></li> 
     <li><a href="#">Videos</a></li> 
     <li><a href="#">Archive</a></li> 
     <li><a href="#">Shoes</a></li> 
     </ul> 
    </section> 

</div>

JSFIDDLE

來源

2016-02-19 ctovelox

這裏是你更新工作代碼，替代JavaScript函數，它會工作。

$(document).ready(function(){ 
 

 
$('[data-related-panel]').click(function(){ 
 
    
 
    \t var target = $(this).data('related-panel'); 
 
    $('#dropdown').find('section').hide(); 
 
    \t $("#"+target).show(); 
 
}); 
 

 
});

nav{ 
 
    background: red; 
 
    padding: 10px; 
 
} 
 

 
nav ul li{ 
 
    display: inline-block; 
 
} 
 

 
nav ul li a{ 
 
    color: white; 
 
} 
 

 
.nav-panel{ 
 
    display: none; 
 
} 
 

 
#dropdown{ 
 
    background: blue; 
 
} 
 

 
#dropdown li{ 
 
    display: inline-block; 
 
} 
 

 
#dropdown li a{ 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- nav menu --> 
 
<nav> 
 
     <ul> 
 
     <li><a href="#" data-related-panel="space">Space</a></li> 
 
     <li><a href="#" data-related-panel="earth">Earth Science</a></li> 
 
     <li><a href="#" data-related-panel="technology">Technology</a></li> 
 
     <li><a href="#" data-related-panel="physics">Physics</a></li> 
 
     <li><a href="#" data-related-panel="gallery">Gallery</a></li> 
 
     </ul> 
 
</nav> 
 

 
<!-- dropdown --> 
 
<div id="dropdown"> 
 
    <section id="space" class="nav-panel"> 
 
     <ul> 
 
     <li><a href="#">Missions</a></li> 
 
     <li><a href="#">Technology</a></li> 
 
     <li><a href="#">Aeronautics</a></li> 
 
     <li><a href="#">Education</a></li> 
 
     <li><a href="#">History</a></li> 
 
     </ul> 
 
    </section> 
 
    <section id="earth" class="nav-panel"> 
 
     <ul> 
 
     <li><a href="#">Geology</a></li> 
 
     <li><a href="#">Oceanography</a></li> 
 
     <li><a href="#">Meteorology</a></li> 
 
     <li><a href="#">Weather</a></li> 
 
     <li><a href="#">Projects</a></li> 
 
     </ul> 
 
    </section> 
 
    <section id="technology" class="nav-panel"> 
 
     <ul> 
 
     <li><a href="#">Music</a></li> 
 
     <li><a href="#">Machines</a></li> 
 
     <li><a href="#">Computers</a></li> 
 
     <li><a href="#">News</a></li> 
 
     <li><a href="#">Projects</a></li> 
 
     </ul> 
 
    </section> 
 
    <section id="physics" class="nav-panel"> 
 
     <ul> 
 
     <li><a href="#">Relativity</a></li> 
 
     <li><a href="#">Quantum mechanics</a></li> 
 
     <li><a href="#">Electromagnetism</a></li> 
 
     <li><a href="#">Thermodynamics</a></li> 
 
     </ul> 
 
    </section> 
 
    <section id="gallery" class="nav-panel"> 
 
     <ul> 
 
     <li><a href="#">Featured Photos</a></li> 
 
     <li><a href="#">Photos</a></li> 
 
     <li><a href="#">Contests</a></li> 
 
     <li><a href="#">Videos</a></li> 
 
     <li><a href="#">Archive</a></li> 
 
     <li><a href="#">Shoes</a></li> 
 
     </ul> 
 
    </section> 
 
    </div>

來源

2016-02-19 14:30:57

在你的jQuery，你需要做的

$('a[data-related-panel="space"]')

相反的數據相關的空間。

來源

2016-02-19 14:24:03

當您單擊nav中的錨時，獲取數據屬性並將其用作要顯示的面板的ID。

$('nav li a').on('click', function(){ 
    var relatedPanel = $(this).data('related-panel'); 
    $('#' + relatedPanel).show(); 
});

DEMO

來源

2016-02-19 14:24:18 Andy

使用數據的下拉菜單 - 顯示子菜單

回答

相關問題