1

私はjqueryとjavascriptは初めてですが、やって練習しています。以下のコンテンツが表示される単純なクリック機能を作成したいと思います。あなたが言う単純なこと。どういうわけか、私の場合はそうではありません。http://jsfiddle.net/richlewis14/FRP3R/1/に例があります。

私がやりたいことは、h3 要素をクリックすることで、その下にあるすべてのコンテンツが表示されます。私がやりたいことは、最初にコンテンツを非表示にするためにslideUp機能を使用しないことです。ページをロードすると、コンテンツが消えるのを見ることができます。読み込み時に slideUp ではなく div を非表示にする必要がありますか?

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()method（'.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

ここでは2つの機能を使用できます。

あなたはすることを試みることができます：

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

また、同じ機能を使用して手動で上下にスライドできますが、手動で切り替えます。

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