使用jQuery帮助隐藏和淡入元素

时间:2011-04-24 00:42:29

标签: javascript jquery

尝试隐藏<p class = "hide">元素,然后点击它们嵌套在其中的<li>将其淡入...

$(document).ready(function(){
  $("p.hide").hide();
  $("li").click(function(){
    ("p.hide").fadein(1000);
   };
  );  
};

和HTML

<ul>   
   <li>Security</li>
     <p class = "hide">Nulla pharetra facilisis ligula sed ultricies.</p>  
   <li>Scalability</li>
     <p class = "hide">Nulla pharetra facilisis ligula sed ultricies.</p>
</ul>

我在这里遗漏了什么吗?再一次,我是jQuery / js的新手,感谢任何帮助!

2 个答案:

答案 0 :(得分:2)

我在JS中发现了一些小的语法问题:

  • ready()函数调用
  • 中关闭了paren
  • 传递给click()
  • 的anon函数后的分号
  • fadeIn()来电中的小写'i'

在你的HTML中,P元素应该在LI元素内部 - 因为它是张贴的无效标记。

此外,您的点击定位所有p.hide元素,而不是嵌套在点击的li内的元素。

例如。假设:

<ul>   
    <li>
        Security
        <p class="hide">Nulla pharetra facilisis ligula sed ultricies.</p>  
    </li>
    <li>
        Scalability
        <p class="hide">Nulla pharetra facilisis ligula sed ultricies.</p>
    </li>
</ul>

然后使用这个JS:

$( function()
{
    $( 'p.hide' ).hide();
    $( 'li' ).click( function()
    {
        $( this ).find( 'p.hide' ).fadeIn( 1000 );
    } );  
} );

以下是您的代码调整为正常工作的实际示例:http://jsfiddle.net/JAAulde/u22yk/1/

答案 1 :(得分:1)

问题在于,您将淡出{em>所有的'p.hide'元素,而不仅仅是<li>中的元素。

尝试这个小修改,您需要查看相关元素的子元素。

$(document).ready(function(){
  $("p.hide").hide();
  $("li").click(function(){
    $(this).find("p.hide").fadeIn(1000);
   };
  );
};