手風琴內容未顯示 - jQuery

我正嘗試通過單擊標題切換內容，手風琴樣式。這裏是我的例子，當我通過Firebug運行時，.click函數被調用，但手風琴內容不會切換。我嘗試了幾種不同的選擇器組合，但沒有成功手風琴內容未顯示 - jQuery

任何建議表示讚賞。

感謝

<style type="text/css"> 

.content { display: none;} 

</style> 
<div class="accordion complete" id="step_1"> 
    <div class="accordion-tab">Step 1.</div> 
    <span> 
     <div class="content"> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit aliquam malesuada. 

     </p> 
    </div> 
    </span> 
</div> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     $(".accordion-tab").click(function(e) { 

      e.preventDefault(); 
      $(this).closest('span').find('.content').not(':animated').slideToggle(); 


     }); 

    }); 
</script>

來源

2013-09-24 Slinky

你需要.next()不.closest()

最接近 - >說明：對於組中的每一個元素，獲得通過測試元件本身的選擇相匹配的第一元素遍歷DOM樹中的祖先。

與DOM中的當前元素或祖先最接近匹配。

下一個 - >說明：獲取緊隨其後的各元素的同級集合中匹配的元素。如果提供了一個選擇器，它只有在匹配該選擇器時纔會檢索下一個兄弟。

DEMO

$(document).ready(function() { 
    $(".accordion-tab").click(function (e) { 
     e.preventDefault(); 
     $(this).next('span').find('.content').not(':animated').slideToggle(); 
    }); 
});

來源

2013-09-24 01:29:03

行動，你是對的，沒有看到div端 – rfaga

我認爲你可以擺脫這種「最接近（‘跨度’），因爲它是搜索的祖先，而不是孩子： JQuery#closest

讓你的查詢需求成爲：

$(this).find('.content').not(':animated').slideToggle();

而作爲一個提示，總是測試你最喜歡的br owser的控制檯是jquery的選擇順序，很容易迷失方向。

來源

2013-09-24 01:31:44 rfaga

手風琴內容未顯示 - jQuery

回答

相關問題