如果另一個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"); 
}