如果另一个div有一个类，jQuery addClass转换为div

Question

我正在寻找将ad类广告给触发器的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"); 
}