Javascript 如何-jQuery切换文本视图

我一直在开发jQueryHTMLCSS，大部分内容我都做对了。我想做的是，当我点击这个名字时，隐藏的文本应该向下滑动——我让它工作了。但我有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>

测试1
+
Lorem ipsum dolor sit amet，是一位杰出的献身者。Aliquam laoreet consequat sem，一种产于西班牙的软腹滨鹬。毛里斯·比本杜姆（Mauris bibendum）和两个射手座坐在同一个地方。罗勒姆·维内纳蒂斯调味品中的杜伊斯·布兰迪特·乌尔纳



测试2
+
Lorem ipsum dolor sit amet，是一位杰出的献身者。Aliquam laoreet consequat sem，一种产于西班牙的软腹滨鹬。毛里斯·比本杜姆（Mauris bibendum）和两个射手座坐在同一个地方。罗勒姆·维内纳蒂斯调味品中的杜伊斯·布兰迪特·乌尔纳



测试3
+
Lorem ipsum dolor sit amet，是一位杰出的献身者。Aliquam laoreet consequat sem，一种产于西班牙的软腹滨鹬。毛里斯·比本杜姆（Mauris bibendum）和两个射手座坐在同一个地方。罗勒姆·维内纳蒂斯调味品中的杜伊斯·布兰迪特·乌尔纳

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

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

---

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

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

}); 

示例：

快速解决方案：

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

}); 

---

示例：

在

jQuery（“#toggle li”）的顶部添加此行。单击（）

函数：

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

---

这将向上滑动打开的

div

s，同时向下滑动选定的div。您可能还需要查看。

在

jQuery（“#toggle li”）的顶部添加这一行。单击（）

函数：

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

---

这将向上滑动打开的

div

s，同时向下滑动选定的div。您可能还想看一看。

使用此选项，您可以“重置”所有“li”，然后打开您单击的一个。使用此选项，您可以“重置”所有“li”，然后打开您单击的一个Hanks mate。但是我选择使用下面的解决方案：）谢谢你的帮助：）@Zerosleep，如果答案对你有效，请接受它（绿色复选标记），这样其他人也可以找到解决方案。完成：）谢谢。。。他们三个都为我工作。。。我选择了最好的1。谢谢你，伙计。但是我选择使用下面的解决方案：）谢谢你的帮助：）@Zerosleep，如果答案对你有效，请接受它（绿色复选标记），这样其他人也可以找到解决方案。完成：）谢谢。。。他们三个都为我工作。。。我选择了最好的1。