jQuery Accordion：從其他頁面打開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()); 
      }); 

})();