Выпадающее меню с использованием данных - для отображения подменю

Question

Я должен использовать дату навигационного меню, чтобы включить подменю, и поэтому показать их ссылки для соответствия. Я не могу изменить 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

Answer 1

Вот ваш обновленный рабочий код, заменить функцию яваскрипта, и он будет работать.

$(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>

Answer 2

В вашем Jquery, что вам нужно сделать

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

Вместо связанных с данными пространства.

Answer 3

Когда вы нажимаете на якорь в nav, возьмите атрибут данных и используйте его как идентификатор панели, которую вы хотите отобразить.

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

DEMO