0
我正在一個原型網站上工作，客戶只是想看看導航如何工作。我正在製作一個帶有精靈的手風琴，我需要子菜單項在點擊時不關閉整個子菜單。我已經應用了一些JQuery，我很滿意它到目前爲止如何工作......我想擴展這些代碼。現在，手風琴在第一個菜單項上有一個活動類，以保持菜單項在頁面加載中打開。 Javascript的其他部分正在修改現有的類以使其保持原樣，以便類在單擊時保持菜單項突出顯示。我想要在鄰居子菜單上發生同樣的事情，並且我希望子菜單項目能夠懸停並且不會在點擊時關閉菜單。下面是相關的代碼至今：原型網站上的手風琴菜單 - 子菜單項目點擊摺疊 - 我不想要這
<ul id="accordion">
<li>
<a href="#" class="history_heading" rel="history_heading">HISTORY</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li>
<a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li>
<a href="#" class="neighborhoods_heading" rel="neighborhoods_heading">NEIGHBORHOODS</a>
<ul id="neighborhoods_levelone_drop">
<li><a href="#" class="arbutus" rel="Tus">Ridge</a></li>
<li><a href="#" class="local_news" rel="local_news">Local News</a></li>
<li><a href="#" class="local_events" rel="local_events">Local Events</a></li>
<li><a href="#" class="local_projects" rel="local_projects">Local Projects</a></li>
<li><a href="#" class="neighborhood_services" rel="neighborhood_services">Neighborhood Services</a></li>
<li><a href="#" class="area_information" rel="area_information">Area Information</a></li>
<li><a href="#" class="photo_gallery" rel="area_information">Photo Gallery</a></li>
<li>
<ul>
<li><a href="#">Park</a></li>
<li><a href="#">Downtown</a></li>
<li><a href="#">Downtown Eastside</a></li>
<li><a href="#">Dun-South</a></li>
<li><a href="#">Park</a></li>
<li><a href="#">Faw</a></li>
<li><a href="#">Randview-Woods</a></li>
<li><a href="#">Stings-Sunrise</a></li>
<li><a href="#">Ton-Cedar</a></li>
<li><a href="#">Risdale</a></li>
<li><a href="#">Karney</a></li>
<li><a href="#">Park</a></li>
<li><a href="#">Silano</a></li>
<li><a href="#">Pole</a></li>
<li><a href="#">Leasant</a></li>
<li><a href="#">Oak</a></li>
<li><a href="#">Frew</a></li>
<li><a href="#">Rile</a></li>
<li><a href="#">Shaughn</a></li>
<li><a href="#">Bambie</a></li>
<li><a href="#">Cona</a></li>
<li><a href="#">Sunset</a></li>
<li><a href="#">Fraser</a></li>
<li><a href="#">Wes</a></li>
<li><a href="#">Point</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="things_to_do_heading" rel="things_to_do_heading">THINGS TO DO</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li>
<a href="#" class="moving" rel="moving_heading">MOVING</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li>
<a href="#" class="population_heading" rel="population_heading">POPULATION</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li>
<a href="#" class="weather_heading" rel="weather_heading">WEATHER</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li>
<a href="#" class="education_heading" rel="education_heading">EDUCATION</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li>
<a href="#" class="health_heading" rel="health_heading">HEALTH</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
<li>
<a href="#" class="cemetery_heading" rel="cemetery_heading">CEMETERY</a>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
</ul>
和JavaScript是這樣的：
<script type="text/javascript">
$(document).ready(function() {
$('#accordion li').children('ul').hide();
$('.history_heading:first').addClass('active').next().show();
$('#accordion li').click(function() {
if ($(this).children('a:first:not(".active")')) {
$('a.history_heading').removeClass('active');
}
$('#accordion li').children('ul').slideUp('fast');
$('#accordion li > a').each(function() {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
});
$(this).children('ul').slideDown('fast');
$(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over');
return false;
});
});
</script>
所以在#neighborhoods_levelone_drop我想在列表中的那些鏈接懸停和點擊時不會關閉菜單。我希望Photo_Gallery列表能夠打開並保持照片庫標題保持突出顯示。我希望這不是太複雜：s
我希望有人可以幫助！