在搜索了各种教程之后,我发现了一些几乎符合我需求的东西,但是我无法使用菜单来完成我真正想要的功能。
我设立了一个jsfiddle来展示我的努力,即使我尽力了解,我也不是很擅长。
我想要一些关于如何获得此菜单的帮助,当默认情况下总是显示content1区域时,如果你切换打开“打开/关闭”按钮和menu1,menu2,menu3出现,当我选择任何3,内容替换content1然后再次关闭菜单
任何想法都将不胜感激
<div class="menu">
<div class="submenu" id="menu" data-content="sort">menu1</div>
<div class="content" id="sort">content1</div>
<div class="submenu" id="menu1" data-content="1sort">menu2</div>
<div class="content" id="1sort">content2</div>
<div class="submenu" id="menu2" data-content="sort2">menu3</div>
<div class="content" id="sort2">content3</div>
</div>
$(document).ready(function() {
$('.menu').hide().before('<a href="#" id="toggle-menu" class="button">Open/Close</a>');
$('a#toggle-menu').click(function() {
$('.menu').slideToggle(1000);
return false;
});
$('.content').hide();
$('.submenu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
});
});
答案 0 :(得分:1)
这里指的是这个小提琴:http://jsfiddle.net/HZksH/3/
我已经修改了你的js
$(document).ready(function() {
$('.menu').hide().before('<a href="#" id="toggle-menu" class="button">Open/Close</a>');
$('a#toggle-menu').click(function() {
$('.menu').slideToggle(1000);
return false;
});
//$('.content').hide();
$('.submenu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
$('.menu').slideToggle(1000);
});
});
我希望它能解决你的问题