用Javascript显示和隐藏文本

我的网站有一些常见问题页面的JavaScript代码。所以，你点击这个问题，答案就会出现。现在，我无法弄清楚的是，当我点击了一个问题并且这个问题已经打开时，当我点击另一个问题时，我想让上一个问题关闭。基本上，一次只能打开一个。找到类似的代码，但不是我正在寻找的。用Javascript显示和隐藏文本

任何帮助将是伟大的，这是我的代码。谢谢！！！！ KAIT

<script type="text/javascript"> 
function unhide(divID) { 
var item = document.getElementById(divID); 
if (item) { 
item.className=(item.className=='hidden')?'unhidden':'hidden'; 
} 
} 
</script> 

<p><a href="javascript:unhide('q1');">Here is my Question???</a></p> 

<div id="q1" class="hidden"> 
<p>The Answer goes here.</p> 
</div> 

<p><a href="javascript:unhide('q2');">Here is my 2nd Question???</a></p> 

<div id="q2" class="hidden"> 
<p>The 2nd Answer goes here.</p> 
</div>

来源

2013-03-01 kaitsie22

它可能会更快使用一个手风琴[jQuery的手风琴（http://jqueryui.com/accordion/） – 2013-03-01 14:26:35

@axrwkr那是相当沉重的重量这种情况。 – 2013-03-01 14:28:36

你使用jQuery吗？ – Wryte 2013-03-01 14:32:00

<script type="text/javascript"> 
    var currentItem; 
    function unhide(divID) { 
     if (currentItem) { 
      currentItem.className = 'hidden'; 
      currentItem = null; 
     } 
     var item = document.getElementById(divID); 
     if (item) { 
      item.className = 'unhidden'; 
      currentItem = item; 
     } 
    } 
</script>

来源

2013-03-01 14:38:08

给出所有的答案类名，然后将其全部选中，并隐藏他们你表明你只是点击了一个之前。如果正在使用jQuery

$(".answers").addClass("hidden"); 
$("#"+id).removeClass("hidden");

来源

2013-03-01 14:29:55 Wryte

使用一个变量来存储到先前显示的元素的引用，则表示要取消隐藏

<script type="text/javascript"> 
    var previous; 
    function unhide(divID) { 
     var item = document.getElementById(divID); 

     if (previous != null) 
      previous.className='hidden'; 

     if (item) { 
      item.className=(item.className=='hidden')?'unhidden':'hidden'; 
      previous = item; 
     } 
    } 
</script> 

<p><a href="javascript:unhide('q1');">Here is my Question???</a></p> 

<div id="q1" class="hidden"> 
<p>The Answer goes here.</p> 
</div> 

<p><a href="javascript:unhide('q2');">Here is my 2nd Question???</a></p> 

<div id="q2" class="hidden"> 
<p>The 2nd Answer goes here.</p> 
</div>

例
http://jsfiddle.net/hLkks

来源

2013-03-01 14:33:46

所述一个之前隐藏它

$(".header a.toggle").click(function(){ 
        if($(this).hasClass("expanded")){ 
         $(this).removeClass("expanded").addClass("collapsed") 
          .parent().siblings(".body").hide() 
        } 
        else{ 
         $(this).removeClass("collapsed").addClass("expanded") 
          .parent().siblings(".body").show() 
        } 
       });

继承人看起来类是展开还是折叠的示例

<a class='toggle expanded' href='#'>Text</a>

所以做出扩大和你的CSS

来源

2013-03-01 14:34:41 WeeklyDad

有一个非常简单的方法倒塌。改进Wryte的答案，只需将一个点击事件添加到所有项目中，即向活动项目添加一个类别并将其从所有其他项目中移除。

item.addEventListener("click", function() { 
    var items = this.parentNode.childNodes; 

    for (var i=0; i < items.length; i++) { 
     items[i].className = ""; 
    } 
    this.className = "active"; 
}, false);

小提琴：http://jsfiddle.net/Met3T/

每个项目可以是任何你喜欢的，你不需要任何框架，只是简单的OLE的JavaScript。

的CSS可以这样简单：

li { 
    height: 2em; 
    background: green; 
    overflow: hidden; 
    margin-bottom: 5px; 
} 
.active { 
    height: auto; 
}

来源

2013-03-01 14:45:04

用Javascript显示和隐藏文本

回答

相关问题