積極下拉鍊接

我想創建一個標籤式的手風琴風格下拉。我一直在玩jQuery一段時間，但無法獲得100％的活動狀態。積極下拉鍊接

我很確定這是JS我搞亂了。

$('.service-button').click(function() { 
    var itemid = '#div' + $(this).attr('target'); //id of the element to show/hide. 

    if ($('.active').length === 0) { 
     $(itemid).slideDown(); 
     $(itemid).addClass('active'); 
     $(this).addClass('new'); 

    } else if (itemid == "#" + $('.active').attr('id')) { 
     $('.active').slideUp(); 
     $(itemid).removeClass('active'); 
     $(this).removeClass('new'); 

    } else { 
     $('.active').slideUp(function() { 
      $(this).removeClass('active'); 
      $('.service-button').removeClass('new'); 
      if ($(".targetDiv:animated").length === 0) { 
       $(itemid).slideDown(); 
       $(itemid).addClass('active'); 
       $(this).addClass('new'); 
      } 
     }); 
    } 
});

我已經在這裏創造http://jsfiddle.net/NWxLe/

小提琴下拉正常工作和活動狀態適用於第一個標籤。但是，當我嘗試打開另一個選項卡時發生此問題。活動狀態從前一個狀態中刪除，但未添加到新狀態。我希望這是有道理的。

任何幫助將大規模讚賞！

謝謝。

來源

2014-02-13 cag1991

能否請您解釋1）你的意思是什麼「選項卡手風琴式下拉「2）發生了什麼3）你想要發生什麼。說你搞砸了JS對於我們來說是不夠的，因爲我們不知道我們看到的是哪部分是你想要發生的。 – Zhihao

我看到你的'active'類被添加到'tab-content'，就像它在代碼中所說的那樣。這不是你想要的嗎？ – badAdviceGuy

對不起，我有點急。基本上發生了什麼是下拉工作正常，但是當你打開另一個選項卡時，活動類不會被添加到它。它從先前開放的一箇中刪除，但沒有添加到新的。 – cag1991

您的代碼可以簡化公平一點。你真的只需要一個if和一個else，因爲無論你單擊該選項卡是不是已經主動或不正是

$('.service-button').click(function() { 
    var itemid = '#div' + $(this).attr('target'); 
    var $activetab = $(this); 

    // If the tab is not already active  
    if (!$activetab.hasClass('new')) { 
     $('.new').removeClass('new'); 
     $('.active').slideUp(); 
     $('.active').removeClass('active'); 

     // Wait for the slideUp to complete (default slideUp time is 500ms) 
     // This is to keep the same behavior as your linked demo 
     setTimeout(function() { 
      $activetab.addClass('new'); 
      $(itemid).slideDown(); 
      $(itemid).addClass('active') 
     }, 500); 
    } else { // If the tab is active already 
     $('.new').removeClass('new'); 
     $('.active').slideUp(); 
     $('.active').removeClass('active'); 
    } 
});

Demo

來源

2014-02-13 17:25:04

問題這是完美的扎克，非常感謝您的幫助！ – cag1991

-1

您是否需要摺疊式手風琴或選項卡？如果你想在這裏手風琴你去：

<!--1st accordion --> 
<div id = "accordion1" class = "E W accordion-item"> 
    <div class = "accordion-item-header clearfix"> 
     <div> 
      <a data-accordion = "" href = "#accordion1"><i class = "accord-opener"></i><span>click Me</span></a> 
     </div> 
    </div> 
    <div class = "accordion-item-body "> 
     <div class = "data-content"> 
      <h3>This is accordion content</h3>    
     </div>  
    </div> 
</div> 
<!--end accordion --> 
<!--2nd accordion --> 
<div id = "accordion2" class = "E W accordion-item"> 
    <div class = "accordion-item-header clearfix"> 
     <div> 
      <a data-accordion = "" href = "#accordion2"><i class = "accord-opener"></i><span>click Me</span></a> 
     </div> 
    </div> 
    <div class = "accordion-item-body "> 
     <div class = "data-content"> 
      <h3>This is accordion content</h3>    
     </div>  
    </div> 
</div> 
<!--end accordion --> 
<!--3rd accordion --> 
<div id = "accordion3" class = "E W accordion-item"> 
    <div class = "accordion-item-header clearfix"> 
     <div> 
      <a data-accordion = "" href = "#accordion3"><i class = "accord-opener"></i><span>click Me</span></a> 
     </div> 
    </div> 
    <div class = "accordion-item-body "> 
     <div class = "data-content"> 
      <h3>This is accordion content</h3>    
     </div>  
    </div> 
</div> 
<!--end accordion -->

樣品CSS：

.accordion-item-header { 
display:block; 
width:340px; 
height:40px; 
background:#454545; 
border:1px solid yellow; 
} 
.accordion-item-header > div > a { 
color:#f8f8f8; 
line-height:40px; 
text-decoration:none; 
padding-left:10px 
} 
.accordion-item-body { 
width:338px; 
height:100px; 
border:1px solid black; 
display:none; 
}

和小提琴：http://jsfiddle.net/nucleo1985/NWxLe/33/

來源

2014-02-13 17:20:20

這不會試圖解決與代碼 –

積極下拉鍊接

回答

相關問題