jQuery的顯示/隱藏DIV的動態內容，

我有一個循環，它輸出以下內容...jQuery的顯示/隱藏DIV的動態內容，

<div class="item-title"><a href="">Title here</a></div> 
    <div class="item-content"> 
     <div class="item-body"> 
     Body Here 
     </div> 
    </div> 
</div>

我想隱藏在頁面加載.item內容。

當您單擊標題，它應該顯示.item內容

當你再次點擊標題，它應該隱藏.item內容

的問題是，作爲我的查詢遍歷，它爲每篇文章分配一個.item內容類，以便每篇文章一起打開和關閉。

如何讓它顯示每個標題只打開相應的內容而不是每篇文章的內容？

來源

2015-03-25 lowercase

您可以嘗試使用此解決方案，你可以看到下面，使用$(this)可以解決你的問題。當我讀到您的問題時，您希望在點擊錨鏈接後不顯示/重定向到其他頁面，然後通過添加e.preventDefault();代碼來阻止其重定向。希望這有助於：

$('.item-content').hide(); 
$(document).on('click','.item-title', function(e){ 
    e.preventDefault(); 
    $(this).next('.item-content').toggle(); 
});

的jsfiddle鏈接

Working example

來源

2015-03-25 01:45:54

嗨，那裏。這不讓我點擊項目標題？我如何使.item-title成爲常規鏈接？ – lowercase 2015-03-25 01:56:27

你的意思是通過定期的鏈接。因爲現在，它已經作爲鏈接反應，但沒有重定向。另一個解決方案是，你可以刪除'e.preventDefault（）;'然後把'＃'放在錨鏈接的href屬性中。 – 2015-03-25 02:02:07

當我點擊鏈接 - 它只是跳回到頁面的頂部。沒有顯示/隱藏。 – lowercase 2015-03-25 02:13:02

http://jsfiddle.net/jLx12rx8/ 的Jquery：

$('.item-title').on('click',function(e){ 
    e.preventDefault(); 
    $(this).children('.item-content').toggle();  
});

HTML：

<div class="item-title"><a href="">title</a> 
    <div class="item-content"> 
     <div class="item-body"> 
     Body Here 
     </div> 
    </div> 
</div>

CSS：

.item-content { 
    display:none; 
}

我認爲內容本來是標題節點的孩子，你沒不指定標題和內容節點如何鏈接。

編輯：與節點新的jsfiddle http://jsfiddle.net/jLx12rx8/2/

來源

2015-03-25 01:44:28 Soronbe

這看起來不錯。我如何管理項目標題上的a/link？我的意思是，我希望項目標題是一個常規鏈接。 – lowercase 2015-03-25 01:50:10

@lowercase新版本適合你的目標嗎？ – Soronbe 2015-03-25 01:55:21

沒有。只是重新加載頁面。 – lowercase 2015-03-25 01:58:38

你可以找到正確的元素隱藏/使用find()方法顯示：

$('.item-title').click(function() { 
    var content = $(this).find('.item-content'); 

    content.toggle(); 
}

來源

2015-03-25 01:45:27 Phylogenesis

可以隱藏的內容，然後建立一個處理程序上的標題，打開裏面的相應內容項：

$('.item-content').hide(); 
$('.item-title') 
    .on('click',function(e) { 
     $(this).find('.item-content').toggle(); 
    });

來源

2015-03-25 01:49:56

接下來可能會比找到更好的工作http://jsfiddle.net/Ljux0stb/1/ – 2015-03-25 02:01:14

它會，只要HTML結構永遠不會改變。但是如果他決定改變佈局，他不得不重寫代碼。 – 2015-03-25 02:36:41

試試這個：

$(document).ready(function() { 
    //Initially hide all the item-content 
    $('.item-content').hide(); 

    // Attach a click event to item-title 
    $('.item-title').on('click', function() { 
     //Find the next element having class item-content 
     $(this).next('.item-content').toggle(); 
    }); 
});

小提琴：http://jsfiddle.net/1wjpohkf/1/

來源

2015-03-25 02:00:41 Vahi

jQuery的顯示/隱藏DIV的動態內容，

回答

相關問題