jquery隱藏和顯示

Question

我在我的網站上建立了一個簡單的FAQ頁面。我只希望這個問題是可見的，一旦用戶點擊問題，就應該顯示答案。由於某種原因，我的代碼無法正常工作。請檢查我的代碼並告訴我我做錯了什麼。

HTML

<div class="copy" id="about1"> 
     <h1>The Mission</h1> 
     <p> 
      content content content 

      content content content 

      content content content 

     </p> 

    <h1>The Game</h1> 
     <p> 
      content content content 

      content content content 

      content content content 

     </p> 
</div> 

JS

$(document).ready(function() { 
    $('.copy h1').onclick(function(){ 
      $('.copy p').hide(); 
     $('this').next('p').show(); 
    }); 
}); 

CSS

.copy p{ 
    display=none; 
} 

Answer 1

兩個問題。首先，在你的JS中，你犯了兩個錯誤 - onclick()應該是click()，並且你用單引號包裝了this。它應該閱讀：

$(document).ready(function() { 
    $('.copy h1').click(function(){ 
     $('.copy p').hide(); 
     $(this).next('p').show(); 
    }); 
}); 

其次，在你的CSS，鍵和值之間的分隔符應該是一個冒號：

.copy p { 
    display: none; 
} 

Answer 2

$(document).ready(function() { 
    $('.copy h1').bind('click', function(){ 
     $('.copy p').hide(); 
     $(this).next('p').show(); 

    }); 
}); 

首先綁定'click'事件，$（'this'）與$（this）不一樣。

Answer 3

您的代碼中存在一些錯誤。 你會發現這裏的修正：http://jsfiddle.net/fQYLm//

錯誤1：display:none，而不是display = none

錯誤2：$('.copy h1').live('click',function() {而不是.onclick

錯誤3：$(this).next('p').show();而不是$('this')

問候。

Answer 4

試試這個：它會觸發與答案顯示隱藏效果點擊問題

$(document).ready(function(){ 
    $('.copy h1').toggle(function(){ 
     $(this).next('p').show(); 
    },function(){ 
     $(this).next('p').hide(); 
    }) 
}) 

Answer 5

你粘貼的東西有些問題。首先，你有不好的CSS語法。嘗試：

.copy p { display: none;} 

（即使用一個:，不是=）。其次，在你的javascript中，你想用.click()而不是.onclick();和$(this)而不是$('this')。此外，jQuery的簡寫形式爲$(document).ready()。你的JavaScript應該是這樣的：

$(function() { 
$('.copy h1').click(function(){ 
      $('.copy p').hide(); 
     $(this).next('p').show(); 
}); 
});