jQuery Accordion菜單擴展和優化

Question

我是使用jQuery進行編程的新手，並且遇到了自定義jQuery手風琴的麻煩。我試圖擴大手風琴的當前環節並不成功，而且我對如何讓它奏效感到茫然。

主要問題：如何讓Section [2]工作（擴展並突出顯示當前活動鏈接）？

我相信這個問題與我如何選擇元素有關。我在該部分中的三行代碼目前是我的最佳選擇。它突出並擴展了全部的鏈接和亮點全部的手風琴標題（h2）。這當然不是我要去做的。我的許多在線搜索都沒有結果，因爲手風琴似乎結構不同，或者我嚴重誤解了一些關鍵概念，因爲沒有一個答案似乎適合這種情況。

第二個問題：如何優化第3部分？代碼本身很簡單，但我重複了幾次，最終導致了下面第[3]節中令人困惑的混亂。

這裏是我當前的jQuery代碼，adapted from this tutorial：

jQuery(document).ready(function() { 

// [1] initialize 
var parentDivs = $('#nestedAccordion div'), 
    childDivs = $('#nestedAccordion h3').siblings('div'), 
    lowDivs = $('#nestedAccordion h4').siblings('div'), 
    img1 = '...', 
    img2 = '...'; 

// [2] expand current link 
$('#nestedAccordion a').addClass("a-active"); 
$('#nestedAccordion a').parents('div').slideDown(); 
$('#nestedAccordion a').parents('div').find('h2').addClass("open"); 

// [3] accordion movement (repetitious...) 
$('#nestedAccordion h2').click(function() { 
    parentDivs.slideUp(); 
    $('#nestedAccordion h2').removeClass("open"); 
     $('#nestedAccordion h3').removeClass("open"); 
     $('#nestedAccordion h4').removeClass("open"); 
    $('#nestedAccordion h2').find('img').attr('src', img2); 
    $('#nestedAccordion h3').find('img').attr('src', img2); 
    if ($(this).next().is(':hidden')) { 
     $(this).next().slideDown(); 
     $(this).find('img').attr('src', img1); 
     $(this).addClass("open"); 
    } else { 
     $(this).next().slideUp(); 
     $(this).find('img').attr('src', img2); 
     $(this).removeClass("open"); 
    } 
}); 
$('#nestedAccordion h3').click(function() { 
    childDivs.slideUp(); 
    $('#nestedAccordion h3').removeClass("open"); 
     $('#nestedAccordion h4').removeClass("open"); 
    $('#nestedAccordion h3').find('img').attr('src', img2); 
    if ($(this).next().is(':hidden')) { 
     $(this).next().slideDown(); 
     $(this).find('img').attr('src', img1); 
     $(this).addClass("open"); 
    } else { 
     $(this).next().slideUp(); 
     $(this).find('img').attr('src', img2); 
     $(this).removeClass("open"); 
    } 
}); 
$('#nestedAccordion h4').click(function() { 
    lowDivs.slideUp(); 
    $('#nestedAccordion h4').removeClass("open"); 
    $('#nestedAccordion h4').find('img').attr('src', img2); 
    if ($(this).next().is(':hidden')) { 
     $(this).next().slideDown(); 
     $(this).find('img').attr('src', img1); 
     $(this).addClass("open"); 
    } else { 
     $(this).next().slideUp(); 
     $(this).find('img').attr('src', img2); 
     $(this).removeClass("open"); 
    } 
}); 

}）;

這裏是Accordion HTML結構。每個級別都有一個div，以便jQuery slideUp和slideDown函數可以工作 - div展開和摺疊。

<div id="nestedAccordion"> 
<h2>Top-level Heading</h2> 
    <div> 
    <h3>Mid-level Heading</h3> 
     <div> 
     <h4>Bottom-level Heading</h4> 
      <div> 
      <ol> 
       <li>Link</li> 
       </ol> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

如果您正在製作自己的手風琴，我會推薦更多的東西沿着

$(function() { 
    $(".accordion-title").click(function(){ 
    body = $(this).closest("accordion").find(".accordion-body") 
    if (body.is(".closed")){ 
     body.removeClass("closed") 
    }else{ 
     body.addClass("closed") 
    } 
    }) 
}); 

線然後你的HTML將看起來像

<div class="accordion"> 
    <div class="accordion-title"></div> 
    <div class="accordion-body"></div> 
</div> 

而且對CSS

.closed { 
    display: none; 
} 

I這樣你就不需要爲每個手風琴單獨重複代碼。 而顯示和隱藏功能允許更簡單的HTML結構。

另外我會建議使用$代替jQuery，因爲它更具可讀性（個人意見）。