0

在搜索了各种教程后，我发现了一些几乎符合我需求的东西，但我无法让菜单按照我真正想要的方式运行。

我设置了一个 jsfiddle 来展示我的努力，即使我正在尽力理解，我也不是很擅长。

http://jsfiddle.net/HZksH/2/

我想要一些有关如何获取此菜单的帮助，默认情况下始终显示 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');
    });
});
4

1 回答 1

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);
});
});

我希望它能解决你的问题

于 2013-08-31T13:34:47.810 回答