Question

我希望只在面板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-->

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

以下是fiddle

Answer 2

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

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

    // Then add class close to trigger div
    $(".trigger").addClass("close");
}

如果另一个div有一个类，jQuery addClass到div

2 个答案: