私はプロトタイプ サイトに取り組んでおり、クライアントはナビゲーションがどのように機能するかを知りたいだけです。スプライトを使用してアコーディオンを構築していますが、サブメニュー項目がクリックされたときにサブメニュー全体を閉じないようにする必要があります。私はすでにいくつかの 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
誰かが助けてくれることを願っています!!