1

我一直在研究一个 jQuery HTML CSS，我的大部分内容都是正确的。我想要做的是当我点击隐藏文本应该向下滑动的名称时——我得到了这个工作。但是我有 4-5 个这样的名字，当我点击第二个名字时，第一个应该隐藏起来，依此类推

这是我的代码

 /*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(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 回答
0

jQuery('#toggle li').click()在函数顶部添加这一行：

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

div这将在选定的向下滑动时向上滑动打开的 s。您可能还想看看jQuery UI 的手风琴功能。

于 2012-07-18T18:48:30.597 回答