[英]onclick open sub menu, on click close sub menu?
在這個頁面http://kimcolemanprojects.com/我需要有一個下拉菜單,點擊打開,點擊同一個錨點再次關閉。 就像它在這個網站上工作http://angela-moore.co.uk/
到目前為止,這是我的菜單 html:
<div class="left" id="nav">
<ul id="menu">
<li id="light">
<a href="lighting_video.html">Lighting + Video</a>
<ul style="display: none;">
<li><a href="django_django.html">Django Django</a></li>
<li><a href="suntrap.html">Suntrap</a></li>
</ul>
</li>
<li id="photo">
<a href="photograms.html">Photograms</a>
</li>
<li id="about">
<a class="active" href="about.html">About</a>
</li></ul>
</div><!--end nav-->
如您所見,我只需要它在一個列表項中工作。 我需要幫助為此編寫 Javascript。
因此,當在索引頁面上時,用戶可以看到三個鏈接燈光 + 視頻、照片、關於。 當用戶單擊燈光 + 視頻時,會在下方打開一個子菜單,其中包含更多鏈接。 如果用戶再次點擊燈光 + 視頻,它將再次關閉。 索引頁面上最初的三個鏈接中的每一個都可能發生同樣的情況。
非常簡單..
<script src="jquery.js"></script>
<div id="navigation">
<p><a href="#" id="toggle">Menu</a></p>
<ul id="menu">
<li><a href="/#" class="book-campaigns">Menu 1</a><ul>
<li><a href="#" class="lol">lol</a></li><li><a href="#" class="lol">lol2</a></li><li><a href="#" class="lol">lol</a></li><li><a href="#" class="lol">lol2</a></li>
</ul></li>
<li><a href="/#" class="book-campaigns">Menu 2</a><ul>
<li><a href="#" class="lol">lol</a></li><li><a href="#" class="lol">lol2</a></li><li><a href="#" class="lol">lol</a></li><li><a href="#" class="lol">lol2</a></li>
</ul></li>
<li><a href="/#" class="book-campaigns">Menu 3</a><ul>
<li><a href="#" class="lol">lol</a></li><li><a href="#" class="lol">lol2</a></li><li><a href="#" class="lol">lol</a></li><li><a href="#" class="lol">lol2</a></li>
</ul></li>
<li><a href="/#" class="book-campaigns">Menu 4</a><ul>
<li><a href="#" class="lol">lol</a></li><li><a href="#" class="lol">lol2</a></li><li><a href="#" class="lol">lol</a></li><li><a href="#" class="lol">lol2</a></li>
</ul></li>
這將是您的 HTML 容器等,在此之下,您將需要您的 javascript 來控制隱藏和更改!! 如果你覺得藝術,你也可以添加一些樣式!
<script>
var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';
$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();
hideMenu = function() {
$('#navigation ul#menu').hide();
$('#navigation').removeClass('open');
$('#toggle').text(showMenuText);
}
$('#toggle').click(function(event){
event.stopPropagation(); event.preventDefault();
$('#navigation ul#menu').toggle();
$('#navigation').toggleClass('open');
var toggleText = $('#toggle').text();
(toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);
});
$('ul#menu > li > a').click(function(event){
$this = $(this);
if( $this.hasClass('page') ) parent.location = $this.attr('href');
if( $this.hasClass('home') ) { parent.location = '/'; }
event.preventDefault(); event.stopPropagation();
if( $this.hasClass('active') ) var justclosed = true;
$('a.active').removeClass('active').next('ul').hide();
if(!justclosed) $this.addClass('active').next('ul').show();
});
</script>
這是一個簡單的 HTML 示例,您可以按照自己的喜好執行它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.