Question

我在我的网站上建立一个简单的常见问题页面。我希望这个问题只是可见的，一旦用户点击问题，它就应该显示答案。由于某种原因我的代码不起作用。请查看我的代码并告诉我我做错了什么。

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

您的代码中存在一些错误。您可以在此处找到更正：http://jsfiddle.net/fQYLm//

错误1：display:none而非display = none

错误2：$('.copy h1').live('click',function() {而非.onclick

错误3：$(this).next('p').show();而非$('this')

问候。

Answer 2

两个问题。首先，在您的JS中，您犯了两个错误 - onclick()应该是click()，并且您已将this包装在单引号中。它应该是：

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

其次，在CSS中，键和值之间的分隔符应该是冒号：

.copy p {
    display: none;
}

Answer 3

试试这个：它会通过点击问题

来切换显示隐藏效果的答案

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

Answer 4

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

    });
});

首先，绑定'click'事件并且$（'this'）与$（this）不同。

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

Jquery隐藏和显示

5 个答案: