활성 드롭 다운 링크

Question

탭으로 된 아코디언 스타일 드롭 다운을 만들려고합니다. 나는 잠시 jQuery를 가지고 놀았지만 액티브 상태를 100 %로 할 수는 없다.

나는 정말 엉망이 된 JS라고 확신한다. 내가 드롭 다운이 제대로 작동하고 활성 상태는 첫 번째 탭에 적용되는 여기 http://jsfiddle.net/NWxLe/

바이올린을 만들었습니다

$('.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'); 
      } 
     }); 
    } 
}); 

. 그러나 다른 탭을 열려고 할 때 문제가 발생합니다. 활성 상태는 이전 상태에서 제거되지만 새 상태에 추가되지는 않습니다. 나는 이것이 의미가 있기를 바랍니다.

도움을 주시면 감사하겠습니다.

감사합니다.

Answer 1

귀하의 코드는 공정한 조금을 단순화 할 수있다. 중 하나를 클릭 탭 중 하나를 이미 활성화 또는 당신이 당신에 의해 무엇을 의미) 일을 설명시겠습니까

$('.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

Answer 2

접을 수있는 아코디언이나 탭이 필요합니까? 여기에 아코디언을 원하는 경우 이동 :

<!--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/