Question

我是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");
});

感谢任何帮助，谢谢

Answer 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/

Answer 2

这是改变了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;**

Answer 3

您可以在此处使用两个功能。

您可以尝试：

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

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

$('h3').click(function()
{
if($('.contentBelowH3').visible())
    {
      $('.contentBelowH3').slideUp();
    }
else
    {
    $('.contentBelowH3').slidDown();
    }
});

Jquery slideToggle无法正常工作

3 个答案: