如何 - jQuery 切换文本视图

HOW TO - jQuery Toggle Text View

本文关键字：文本 视图 jQuery 如何      更新时间：2023-11-07

我一直在研究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>

我认为这是最简单的(但可能不是那么漂亮(的方法：

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');
}

快速解决方案：

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/

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

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

这将向上滑动一个打开的div，而选定的向下滑动。您可能还想看看jQuery UI的手风琴功能。

相关文章：