jQuery 아코디언 : 다른 페이지의 achor가있는 항목 열기

Question

나는 jQuery에서 새로운 것을 중단합니다.
홈페이지에서 아코디언 페이지로 연결되는 링크가 4 개 있습니다. 예를 들어
는 : http://pluscoating.falcondesign.nl/poedercoaten/#2
이것은 내가 해시 후 활성 클래스를 추가하는 방법을 알아 냈 ID 2.

와 아코디언을 열어야합니다. 이제 문제는 '활성'클래스가 'a'요소 다음에 위치한다는 것입니다. 그러나 클래스 'acc-trigger'다음에 추가되어야합니다. 그러면 어떻게해야합니까?

내 HTML 코드 :

<div> 
    <span class="acc-trigger"> 
     <a id="1" href="#">Title 1</a> 
    </span> 
    <div class="acc-container"> 
     <div class="content">content 1</div> 
    </div> 
    <span class="acc-trigger"> 
     <a id="2" href="#">Title 2</a> 
    </span> 
    <div class="acc-container"> 
     <div class="content">content 2</div> 
    </div> 
    <span class="acc-trigger"> 
     <a id="3" href="#">Title 3</a> 
    </span> 
    <div class="acc-container"> 
     <div class="content">content 3</div> 
    </div> 
    <span class="acc-trigger"> 
     <a id="4" href="#">Title 4</a> 
    </span> 
    <div class="acc-container"> 
     <div class="content">content 4</div> 
    </div> 
</div> 

jQuery를 코드 :

(function() { 

    var $container = $('.acc-container'), 
     $trigger = $('.acc-trigger'); 

    var hash = window.location.hash.substring(1); 

    $container.hide(); 
    $trigger.first().addClass('active').next().show(); 

    if(hash) { 
     var accordItem = $('.acc-trigger a#' + hash); 
      $trigger.removeClass('active').next().slideUp(300); 
      accordItem.addClass('active').next().show(); 
    }  

    var fullWidth = $container.outerWidth(true); 
    $trigger.css('width', fullWidth); 
    $container.css('width', fullWidth); 

    $trigger.on('click', function(e) { 
     if($(this).next().is(':hidden')) { 
      $trigger.removeClass('active').next().slideUp(300); 
      $(this).toggleClass('active').next().slideDown(300); 
     } 

     e.preventDefault(); 
    }); 


    // Resize 
    $(window).on('resize', function() { 
     fullWidth = $container.outerWidth(true) 
     $trigger.css('width', $trigger.parent().width()); 
     $container.css('width', $container.parent().width()); 
    }); 

})(); 

Answer 1

는

if(hash) { 
    var accordItem = $('.acc-trigger a#' + hash); 
    $trigger.removeClass('active').next().slideUp(300); 
    accordItem.closest('.acc-trigger').addClass('active').next().show(); 
} 

또 다른 해결책은

을 등록 클릭 이벤트 처리기 후 클릭 이벤트를 트리거하는 시도

(function() { 

    var $container = $('.acc-container'), $trigger = $('.acc-trigger'); 

    var hash = window.location.hash.substring(1); 

    $container.hide(); 
    $trigger.first().addClass('active').next().show(); 

    var fullWidth = $container.outerWidth(true); 
    $trigger.css('width', fullWidth); 
    $container.css('width', fullWidth); 

    $trigger.on('click', function(e) { 
       if ($(this).next().is(':hidden')) { 
        $trigger.removeClass('active').next().slideUp(300); 
        $(this).toggleClass('active').next().slideDown(300); 
       } 

       e.preventDefault(); 
      }); 
    //move this line to down after the click event handler 
    if (hash) { 
     $('.acc-trigger a#' + hash).triggerHandler('click'); 
    } 

    // Resize 
    $(window).on('resize', function() { 
       fullWidth = $container.outerWidth(true) 
       $trigger.css('width', $trigger.parent().width()); 
       $container.css('width', $container.parent().width()); 
      }); 

})();