切換下一個div jquery無法正常工作

-1

我想使用JQuery顯示/隱藏div。我在其中一頁上有幾個。我試圖編寫一些當單擊類「切換」的任何鏈接時會觸發的東西。然後它會查找下一個div，相對於點擊鏈接，與class="showHide"然後顯示或隱藏它取決於它的當前狀態。切換下一個div jquery無法正常工作

我遇到的麻煩是與.next（）函數。它似乎並沒有爲我工作。

$(document).on("click", ".toggle", function(event){ 
    event.preventDefault(); 
    $(this).next('.showHide').hide(); 
});

HTML

<div class="medium-12 columns"> 
    <h2>Lists</h2> 
    <div class="medium-2 columns"> 
    <h3>Food type</h3> 
    </div> 
    <div class="medium-10 columns"><small class="toggle">Show/hide</small></div> 
    <div class="medium-12 columns showHide">...</div> 
</div>

如果我這樣做$(this).css("background", "red");，它工作正常。所以，我很確定這是絆倒我的.next('.showHide')。

我也試過.nextAll('.showHide')與.first()，這也沒有工作。

來源

2015-09-29 ipsomatic9

你是什麼確切的HTML –

[這裏精]工程**（https://jsfiddle.net/Guruprasad_Rao/zdkL8dp8/）**！ –

你的'toggle'和'showHide'元素*兄弟姐妹*？如果不是，'.next'將不起作用。事實上，它需要成爲下一個兄弟（因此函數名）;）如果你顯示了確切的HTML，它會有所幫助。 – aquinas

jQuery的next()選擇「緊隨兄弟」匹配的元素。同樣，nextAll()選擇「以下所有兄弟姐妹」。在你的代碼中，這兩個元素（.trigger和.showHide）不是兄弟姐妹。

爲了使用next()，我建議從.trigger元件遍歷到其父.medium-10，它是相關聯的.showHide元件的兄弟節點。

jQuery('.toggle').on('click', function() { 
 
    jQuery(this).parent('.medium-10').next('.showHide').toggle(); 
 
});

.showHide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="medium-12 columns"> 
 
    <h2>Lists</h2> 
 
    <div class="medium-2 columns"> 
 
    <h3>Food type</h3> 
 
    </div> 
 
    <div class="medium-10 columns"><small class="toggle">Show/hide</small></div> 
 
    <div class="medium-12 columns showHide">...</div> 
 
    <div class="medium-10 columns"><small class="toggle">Show/hide</small></div> 
 
    <div class="medium-12 columns showHide">...</div> 
 
    <div class="medium-10 columns"><small class="toggle">Show/hide</small></div> 
 
    <div class="medium-12 columns showHide">...</div> 
 
</div>

來源

2015-09-29 17:02:41 showdev

這或多或少是我最終做的。感謝大家！ – ipsomatic9

-1

試試這個：

$(this).siblings('div.showHide').toggle();

來源

2015-09-29 16:26:38

按照OP的代碼中，'.toggle'元素沒有兄弟姐妹。 – showdev

回答此問題時，OP的代碼不存在 – Popnoodles

切換下一個div jquery無法正常工作

回答

相關問題