1

我是 jquery 和 javascript 的新手，但正在实践中。我想创建一个简单的点击功能，其中显示以下内容。你说的很简单。出于某种原因，这不是我的情况。我在http://jsfiddle.net/richlewis14/FRP3R/1/有一个例子。

我想要做的是单击 h3 元素，然后它将显示下面的所有内容。我还想做的是不要先使用slideUp功能隐藏内容，因为加载页面时您会看到内容消失，这对我来说看起来有点俗气。我需要在加载时隐藏 div 而不是 slideUp 吗？

HTML：

<div class="container">
      <div class="row">
      <div class="span4">
      <div class="widget">
        <div class="widget-header">
          <i class="icon-info-sign icon-large"></i>
           <h3 class="clickme">Core</h3>
        </div><!--/widgetheader-->
         <div class="widget-content-box">
          <p>Hello</p>


         </div><!--/widget content-->
        </div><!--widget-->
      </div><!--span4--><div class="container">

JavaScript：

$(".widget-content-box > p").slideUp();
$("h3.clickme").click(function(){
    $(this).next.slideToggle("slow");
});

任何帮助表示赞赏，谢谢

4

3 回答 3

1

next您的代码中应该有一个错字next()。另请注意，您应该先使用parent()然后next()方法（'.widget-content-box' 不是 h3 元素的下一个兄弟），并且当您隐藏 p 元素时.widget-content-box没有可见的内容显示，您应该隐藏它.widget-content-box。

$(document).ready(function(){
    $(".widget-content-box").slideUp(); // $(".widget-content-box").hide()
    $("h3.clickme").click(function(){
        $(this).parent().next().slideToggle("slow");
    });
})

http://jsfiddle.net/qxnjj/

于 2012-09-22T21:56:02.537 回答
1

这是改变的jQuery：

$("h3.clickme").click(function(){
    $(this).parent().next().slideToggle("slow");
  });

在 css 中我添加了 display:none 所以你不必首先滑动这个 div：

.widget-content-box{
border:none;
border-radius: 5px 5px 5px 5px;
background:white;
**display:none;**
于 2012-09-22T22:05:31.830 回答
0

您可以在这里使用两个功能。

你可以尝试这样做：

$('h3').click(function()
{
   $('.contentBelowH3').slideToggle();
});

您可以使用相同的功能手动上下滑动，但手动切换。

$('h3').click(function()
{
if($('.contentBelowH3').visible())
    {
      $('.contentBelowH3').slideUp();
    }
else
    {
    $('.contentBelowH3').slidDown();
    }
});
于 2012-09-22T21:59:33.553 回答