2

3 つの見出しがあり、3 つすべてに何らかの説明があります。
最初の見出しをクリックすると、その説明が表示されます。
2 番目の見出しをクリックすると、その説明が表示されます。
私のコードはここにあります:
js:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
</script>

CSS:

.layer1 {
margin: 0;
padding: 0;
width: 500px;
}

.heading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.content {
padding: 5px 10px;
background-color:#fafafa;
}
p { padding: 5px 0; }

html コード:

<div class="layer1">
    <p class="heading">Header-1 </p>
    <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    <p class="heading">Header-2</p>
    <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    <p class="heading">Header-3</p>
    <div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>

1 つの見出しをクリックすると、他の説明が非表示になり、最初の見出しの説明だけが表示されるようになりました。
これを行う方法..？

4

6 に答える 6

7

選択した のすべての.content兄弟を非表示.content:

jQuery(".heading").click(function() {
    jQuery(this)
          .next(".content").slideToggle(500)
          .siblings(".content").slideUp(500);
});
于 2012-08-09T11:48:52.603 に答える
1 
jQuery(document).ready(function() { 
   //toggle the componenet with class msg_body 
   jQuery(".heading").click(function() 
   {
      jQuery(this).parent().find(".opened").slideToggle(500, function(){
         $(this).removeClass('opened');
      });
      jQuery(this).next(".content").slideToggle(500, function(){
         $(this).addClass('opened');
      }); 
   }); 
});
于 2012-08-09T11:49:45.303 に答える
1

クリックイベントでこれを試してください。

jQuery(".heading").click(function()
    {
        jQuery(".content").hide();
        jQuery(this).next(".content").slideToggle(500);
    });

それがあなたのために働くことを願っています。

于 2012-08-09T11:51:00.820 に答える
1

これは機能しませんか？

jQuery(document).ready(function() {
    jQuery(".content").hide();
    //toggle the componenet with class msg_body
    jQuery(".heading").click(function() {
        jQuery(".content").slideUp();
        jQuery(this).next(".content").slideDown(500);
      });
});​

http://jsfiddle.net/cUyhe/

于 2012-08-09T11:48:39.743 に答える
1 
jQuery(document).ready(function() {
    jQuery(".content").hide();
    //toggle the componenet with class msg_body
    jQuery(".heading").click(function() {
        jQuery(".content").not(jQuery(this).next(".content")).slideUp(500);
        jQuery(this).next(".content").slideToggle(500);
    });
});​

フィドル

于 2012-08-09T11:48:45.890 に答える
0

そのためには、それを特定する必要があります。クラスごとにタグを取得し、すべてを非表示にすることなく非表示にするよりも、クラスを使用して別の名前でクローンを作成することで識別できます。

于 2012-08-09T11:51:43.103 に答える