Question

我是一个jQuery新手，所以请原谅我，如果这看起来有点简单！我正在设置一个滑动标题系统，它非常像手风琴菜单，但打开和关闭元素的链接在HTML的不同部分，所以我找到的所有手风琴教程都不起作用。

我到目前为止：HTML：

<div class="drawer" id="drawer_about"></div>
<div class="drawer" id="drawer_contact"></div>
<div class="drawer" id="drawer_hire"></div>
<div class="drawer" id="drawer_social"></div>

...

<ul class="navigation">
<li><a href="#" class="show_hide_about"><span>About Me</span></a></li>
<li><a href="#" class="show_hide_contact"><span>Get In Touch</span></a></li>
<li><a href="#" class="show_hide_hire"><span>Hire Me</span></a></li>
<li><a href="#" class="show_hide_social"><span>Social Networks</span></a></li>
</ul>

和jQuery：

$(document).ready(function(){
        $("#drawer_about").hide();
        $("#drawer_contact").hide();
        $("#drawer_hire").hide();
        $("#drawer_social").hide();

        lastBlock = ("#drawer_hire");


    $('.show_hide_about').click(function(){
        $("#drawer_about").slideToggle(700);
        $(lastBlock).hide(700);
        lastBlock = ("#drawer_about");
    });

    $('.show_hide_contact').click(function(){
        $("#drawer_contact").slideToggle(700);
        $(lastBlock).hide(700);
        lastBlock = ("#drawer_contact");
    });

    $('.show_hide_hire').click(function(){
        $("#drawer_hire").slideToggle(700);
        $(lastBlock).hide(700);
        lastBlock = ("#drawer_hire");
    });

    $('.show_hide_social').click(function(){
        $("#drawer_social").slideToggle(700);
        $(lastBlock).hide(700);
        lastBlock = ("#drawer_social");
    });
});

我要去OTT吗？有更简单的方法吗？

我遇到的主要问题是一切正常，但是如果ABOUT ME面板打开并且用户点击HIRE ME链接，我会得到一个奇怪的效果。在这种情况下我想要的是ABOUT ME面板折叠，然后HIRE ME面板折叠。

希望有意义，谢谢大家，

亚历

Answer 1

我设置了这样的链接：<a href="" class="show" data-section="contact">asdf</a>

然后你所需要的只是：

$('.show').click(function(ev) {
    var $visibleDrawer = $('.drawer:visible').eq(0); // make sure to get only one (or 0) drawer

    // set currentSection to the drawer's id or empty if no drawer was found
    var currentSection = $visibleDrawer.length?$visibleDrawer.attr('id').replace('drawer_',''):'';

    $('.drawer').slideUp(700);
    $('a.show').removeClass('active'); // reset all link classes


    (function(clickedSection, $link){ //<-- pass the active link to have access to it inside the closure
        if(currentSection != clickedSection){
            $link.addClass('active');        // set active class on clicked link
            setTimeout(function() {
                $('#drawer_'+clickedSection).slideDown(700);
            }, ($visibleDrawer.length?700:0)); // set the timeout to 0 if no drawer visible
        }
    })($(this).data('section'),$(this)); //<--

    ev.preventDefault();
});

Answer 2

使用.animate()您可以解析将在动画结束时执行的回调函数，或者您可以使用.queue()来跟踪对象和元素的执行点。一些伪代码的第一种方式

$('#foo').animate(function() {
    // do stuff with foo
}, duration, easing, function() {
    $('#bar').animate(function() {
         // do stuff with bar
    })
});

Answer 3

Here是jsFiddle如何工作的链接（注意你应该选择框架作为jQuery）

我认为这适合你：

    $(document).ready(
        function(){
            $('.header').click(function(){
                //To hide all other contents
                $('.content').slideUp('slow');
                var num=$(this).attr('id').split('_')[1];
                //And show this one .. 
                $('#content_'+num).slideDown('slow');
            });

        }
    );

HTML应如下所示：

                    <div class="header" id="title_111"><a href="#">Category 1</a></div>
                    <div class="content" id="content_111">

                    </div>

                    <div class="header" id="title_112"><a href="#">Category 2</a></div>
                    <div class="content" id="content_112">

                    </div>

                    <div class="header" id="title_113"><a href="#">Category 3</a></div>
                    <div class="content" id="content_113">

                    </div>

                    <div class="header" id="title_114"><a href="#">Category 4</a></div>
                    <div class="content" id="content_114">

                    </div>

                    <div class="header" id="title_115"><a href="#">Category 5</a></div>
                    <div class="content" id="content_115">

                    </div>

                    <div class="header" id="title_116"><a href="#">Category 6</a></div>
                    <div class="content" id="content_116">

                    </div>

jQuery - 如何在延迟另一个事件的同时运行一个事件？

3 个答案: