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(); 
}); 
});