-2

我希望仅在面板 div 打开的情况下向触发器 div 添加一个类。不能完全破解它。

基本上：打开面板=“活动”类添加到它的触发器

我把这个小提琴放在一起让生活更轻松：http: //jsfiddle.net/markthelefty/NLzz4/

谢谢！

jQuery：

$(document).ready(function(){
    // add initial action- first panel
        $(".trigger:first").bind("click",function(){
                $(this).next().fadeToggle("slow", "linear");
            })
        $(".panel").each(function(){
            $(this).addClass("close");
            $(this).css("display","none");
        })
        $(".panel:first").removeClass("close");
        $(".panel:first").addClass("open");
        $(".panel:first").css("display","block");
        var lastid=$(".trigger:last").attr("id");
        $(".next").click(function(){
            var parid=$(this).parent().attr("id");
            var first=0;
            $(this).parent().prev().unbind("click");
            $(this).parent().prev().bind("click",function(){
                $(this).next().fadeToggle("slow", "linear");
            })
            var nextid=$(this).parent().next().attr("id");

            if (nextid==lastid)
            {
            $(this).parent().next().unbind("click");
                $(this).parent().next().bind("click",function(){
                    $(this).next().fadeToggle("slow", "linear");
                })
            }
            $(".close").each(function(){
                var id=$(this).attr("id");
                if(id>parid && first==0) {
                    $(this).removeClass("close");
                    $(this).addClass("open");
                    first=1;

                    $(this).fadeIn("slow");
            }
            })
            $(this).parent().removeClass("open");
            $(this).parent().addClass("close");
            $(this).parent().fadeOut("slow");

        })
    })

HTML

    <div id="trigger-1" class="trigger">
        <h1>Panel One Trigger (Entire black area)</h1>
    </div><!--/trgger-1-->

    <div id="panel-1" class="panel">
        <p>Or sit amet, consectetur adipiscing elit. Proin venenatis faucibus quam, sit amet ornare risus dignissim vitae. Praesent accumsan quam nec velit viverra vitae faucibus mi lacinia. Donec at leo eget massa lobortis gravida. Phasellus eu ligula non sem scelerisque sodales sit amet sed metus. </p>
        <a href="#" class="next">NEXT STEP ></a>
    </div><!--/panel-1-->



    <div id="trigger-2" class="trigger">
        <h1>Panel Two Trigger (Entire black area)</h1>
    </div><!--/trgger-2-->

    <div id="panel-2" class="panel">
        <p>Or sit amet, consectetur adipiscing elit. Proin venenatis faucibus quam, sit amet ornare risus dignissim vitae. Praesent accumsan quam nec velit viverra vitae faucibus mi lacinia. Donec at leo eget massa lobortis gravida. Phasellus eu ligula non sem scelerisque sodales sit amet sed metus. </p>
        <a href="#" class="next">NEXT STEP ></a>
    </div><!--/panel-2-->



    <div id="trigger-3" class="trigger">
        <h1>Panel Three Trigger (Entire black area)</h1>
    </div><!--/trgger-3-->

    <div id="panel-3" class="panel">
        <p>Or sit amet, consectetur adipiscing elit. Proin venenatis faucibus quam, sit amet ornare risus dignissim vitae. Praesent accumsan quam nec velit viverra vitae faucibus mi lacinia. Donec at leo eget massa lobortis gravida. Phasellus eu ligula non sem scelerisque sodales sit amet sed metus. </p>
        <a href="#" class="submit">SUBMIT ></a>
    </div><!--/panel-3-->
4

2 回答 2

1

尝试这样的事情

$('div.panel').slideUp();

$('div.trigger').on("click",function(){
    if(!$(this).hasClass("open"))
    {
       $('div.panel').slideUp();
       $('div.trigger').removeClass("open");
       $(this).next("div").slideDown();
       $(this).addClass("open");
    }
    else
    {
        $(this).next('div').slideUp();
        $('div.trigger').removeClass("open");
        $('div.panel').slideUp();
    }
});

这是小提琴

于 2013-05-02T15:38:31.503 回答
1

无法获取您的代码，但这可能会帮助您继续前进：

// If panel div has class open
if ($(".panel").hasClass("open")) {

    // Then add class close to trigger div
    $(".trigger").addClass("close");
}
于 2013-05-02T15:30:26.917 回答