1

私はjQueryHTMLCSSに取り組んでおり、ほとんどの部分が正しく機能しています。私がやりたいのは、非表示のテキストが下にスライドする名前をクリックすると、これが機能するようになりました。しかし、私にはそのような名前が4〜5個あり、2番目の名前をクリックすると、1番目の名前が非表示になります。

これが私のコードです

 /*JQUERY CODE */

 jQuery(document).ready(function () {

jQuery('#toggle li').click(function () {

    var text = jQuery(this).children('div.slide');

    if (text.is(':hidden')) {
        text.slideDown('200');
        jQuery(this).children('span').html('-');
        jQuery(this).children('.selected').css('color','#a61607');
    } else {
        text.slideUp('200');
        jQuery(this).children('span').html('+');
        jQuery(this).children('.selected').css('color','#878484');      
    }

});

});

/*HTMLコード*/

<ul id="toggle">
  <li>
    <h3 class="selected">TEST 1</h3>
    <span>+</span>
    <div class="slide">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet consequat sem, a venenatis purus mollis in. Mauris bibendum dui eget nunc sagittis sit amet placerat tortor euismod. Duis blandit urna in lorem venenatis condimentum.</p>
    </div>
  </li>
  <li>
    <h3 class="selected">TEST 2</h3>
    <span>+</span>
    <div class="slide">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet consequat sem, a venenatis purus mollis in. Mauris bibendum dui eget nunc sagittis sit amet placerat tortor euismod. Duis blandit urna in lorem venenatis condimentum..</p>
    </div>
  </li>
  <li>
    <h3 class="selected">TEST 3</h3>
    <span>+</span>
    <div class="slide">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet consequat sem, a venenatis purus mollis in. Mauris bibendum dui eget nunc sagittis sit amet placerat tortor euismod. Duis blandit urna in lorem venenatis condimentum.</p>
    </div>
  </li>
</ul>
4

3 に答える 3

1

これは、これを行う最も簡単な（しかし、それほどきれいではないかもしれません）方法だと思います。

if(text.is(':hidden'))
{
    jQuery('#toggle li > div.slide:not(:hidden)').click();
    text.slideDown('200');
    jQuery(this).children('span').html('-');
    jQuery(this).children('.selected').css('color','#a61607');
}
于 2012-07-18T18:40:53.517 に答える
0

jQuery('#toggle li').click()関数の先頭に次の行を追加します。

jQuery(this).siblings().children('div.slide').slideUp();

これにより、開いたdivs が上にスライドし、選択したものが下にスライドします。jQuery UI のアコーディオン機能もご覧ください。

于 2012-07-18T18:48:30.597 に答える
0

クイックソリューション:

jQuery(document).ready(function () {

jQuery('#toggle li').click(function () {
    $('.slide').slideUp('200');
    $('#toggle span').html('+');
    $('.selected').css('color','#878484');
    var text = jQuery(this).children('div.slide');

    if (text.is(':hidden')) {
        text.slideDown('200');
        jQuery(this).children('span').html('-');
        jQuery(this).children('.selected').css('color','#a61607');
    } 
});

});

例: http://jsfiddle.net/Jznbh/

于 2012-07-18T18:45:54.280 に答える