Question

我试图制作一个带有切换的手风琴，现在看起来效果很好。作为javascript的新手，我想得到一些帮助是它的组合方式。

这不是我知道的......

    $(document).ready(function() {
     $('#contact').click(function() {
        $('#content2, #content3').hide(200, 'linear');
          $('#content').toggle(700, 'linear');          
    });
});

$(document).ready(function() {
     $('#services').click(function() {
        $('#content, #content3').hide(200, 'linear');
          $('#content2').toggle(700, 'linear');
    });
});

$(document).ready(function() {
     $('#about').click(function() {
        $('#content, #content2').hide(200, 'linear');
          $('#content3').toggle(700, 'linear');
    });
});

Answer 1

我建议：

 $('#menu > a').click(function() { // specifies which a elements
     var that = $(this), // caching the selectors for performance
         divs = $(this).siblings('div'),
         div = $(this).nextAll('div:first');
     divs.not(div).hide(200, 'linear'); // hides all the sibling divs *except* for the
                                        // immediately following div element
     div.toggle(700, 'linear');         // toggles the immediately-following div
});

JS Fiddle demo

参考文献：

Answer 2

您的代码不是非常易于扩展，您可能希望这样尝试：http://jsfiddle.net/PzYvA/

$(document).ready(function() {    
    var $menu = $("#menu");
    $menu.children("a").click(function(){
        var $content = $(this).next("div");
        $menu.children("div").not($content).hide(200, 'linear');
        $content.toggle(700, 'linear');
    });
});

还添加以下css

#menu > a {
    display:block;
}

并删除a标记后的<br />

Answer 3

您可以看到您的3个功能具有完全相同的代码然后，你必须使用html类来定义你的html元素的functios，然后使用javascript / jquery，定义这些功能如何工作。

它将简化您的CSS和您的javascript：

http://jsfiddle.net/td3UB/

Jquery拨动式手风琴

3 个答案: