定義列表手風琴與無序列表控制

Question

因爲我發現它的簡單手風琴JSFIDDLE 我想添加從列表菜單控制，例如當我點擊無序列表的是Panel2中，是Panel2在DT點擊（展開也），任何建議。由於

<ul class="list" style="list-style-type: none;"> 
<li><a href="#">Panel 1</a></li> 
<li><a href="#">Panel 2</a></li> 
<li><a href="#">Panel 3</a></li> 
</ul> 
<dl class="accordion"> 
<dt><a href="">Panel 1</a></dt> 
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd> 
<dt><a href="">Panel 2</a></dt> 
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd> 
<dt><a href="">Panel 3</a></dt> 
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. </dd> 
</dl> 

(function($) { 

    var allPanels = $('.accordion > dd').hide(); 

    $('.accordion > dt > a').click(function() { 
    allPanels.slideUp(); 
    $(this).parent().next().slideDown(); 
    return false; 
    }); 
    $('.accordion dt a').first().click(); 

})(jQuery); 

Answer 1

從您的標記，我假設項目在ul順序和項目的手風琴的順序是一樣的，如果這樣的話在ul li點擊你手動觸發手風琴標題的單擊事件在相同指數

(function ($) { 

    var allPanels = $('.accordion > dd').hide(); 

    var $as = $('.accordion > dt > a').click(function() { 
     allPanels.slideUp(); 
     $(this).parent().next().slideDown(); 
     return false; 
    }); 
    $('.accordion dt a').first().click(); 

    $('.list li').click(function(e){ 
     e.preventDefault(); 
     $as.eq($(this).index()).click(); 
    }) 

})(jQuery); 

演示：Fiddle