用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顯示和隱藏文本

回答

相關問題