jQuery切換下一個P

我試圖創建一個功能，將切換段落顯示CSS只有一個按鈕被點擊時，我似乎無法讓它工作，我的瀏覽器只是回到頁面的頂部？我jQuery是...jQuery切換下一個P

$('.useful-links ul li a').click(function(){ 
    $('.useful-links ul li a').parent('li').find('p').toggle();  
});

和我的標記是

<li> 
    <a href="#">RESIDENTIAL AGENTS</a> 
    <p style="display:none;">sfsdfsdfsd</p> 
</li>

來源

2012-08-03 Liam

我假設你的HTML結構是這樣的：

<div class="useful-links"> 
    <ul> 
     <li> 
      <a href="#">RESIDENTIAL AGENTS</a> 
      <p style="display:none;">sfsdfsdfsd</p> 
     </li> 
    </ul> 
</div> 

// For your jQuery selector to work as you have it 

$('.useful-links ul li a').on('click', function (e) { 
    e.preventDefault(); // stop href() 
    $(this).next('p').toggle();  
});

演示： http://jsfiddle.net/p4SJB/

來源

2012-08-03 15:34:08

似乎不工作@mcpDESIGNS，同樣的事情發生在我的... – Liam 2012-08-03 15:37:17

您的HTML結構是否正確？還有其他人都在說'e.preventDefault（）;'可能是問題 – 2012-08-03 15:40:36

謝謝，這是有效的！ – Liam 2012-08-03 15:41:09

使用$(this)：

$('.useful-links ul li a').click(function(e){ 
    e.preventDefault(); 
    $(this).parent('li').find('p').toggle();  
});

我更喜歡找到共同的父母，然後「查找」目標元素。這意味着如果您的HTML標記發生變化，p出現在a之前，那麼您的jQuery不會受到影響。

見演示：http://jsfiddle.net/S2hSp/

來源

2012-08-03 15:34:14 Curt

似乎無法工作@curt – Liam 2012-08-03 15:36:59

http://jsfiddle.net/WGDcG/ – Liam 2012-08-03 15:37:51

@Liam我提供了一個工作的例子。 http://jsfiddle.net/S2hSp/ – Curt 2012-08-03 15:38:37

首先您正在使用錨元素工作，所以你需要阻止默認動作。然後，你可以做你的邏輯：

$('.useful-links ul li a').click(function(e){ 
    e.preventDefault(); 
    $(this).closest('li').find('p').toggle();  
});

Here is a working example

另外，如果你知道你的a和p元素將始終具有相同的父母，你可以使用siblings方法（不是真的任何更好效果，只是一個候補）：

$(this).siblings('p').toggle();

and another example

來源

2012-08-03 15:39:17 musefan

jQuery切換下一個P

回答

相關問題