如何切換課程風格？

Question

我有段落的列表在客艙：

<div id=chatbox> 
    <p><i>15:21</i><b data-c=john>john</b>: hello jack</p> 
    <p><i>15:22</i>i want to tell you something</p> 
    <p><i>17:17</i><b data-c=jack>jack</b>: hi john.</p> 
    <p class=hidden><i>20:15</i>Ο <span data-c=server>server</span> alex joined the chat</p> 
    <p><i>17:17</i><b data-c=alex>alex</b>: hi all of you.</p> 
</div> 

，我想必須按順序切換按鈕顯示/隱藏隱藏要素。有沒有辦法將hidden類的樣式從display:none切換到display:inline並向後？

請注意，如果我將所有現有的class = hidden更改爲可見，當AJAX帶來新的隱藏線時，與以前的元素相比，它仍然會隱藏。有沒有辦法改變一個類風格的內容？

Answer 1

這是一個非常糟糕的主意，讓JavaScript遍歷所有的元素來改變顯示，當你可以很容易地通過在父元素上切換一個類來實現它。

Here's the codepen demo

當點擊該按鈕，你可以切換#chatbox元件上的showHidden類，並使用CSS來隱藏或顯示所有隱藏的項目裏面。

CSS：

.hidden { 
    display: none; 
} 

#chatbox.showHidden .hidden { 
    display: inline; 
} 

的jQuery：下面

$(document).ready(function() { 

    $('.toggleButton').on('click', function(){ 
    $('#chatbox').toggleClass('showHidden'); 
    }); 

}); 

Answer 2

如果使用jQuery查找.toggle這裏http://api.jquery.com/toggle/

在此還看到了JavaScript的唯一的答案：Jquery .toggle replacement code

Answer 3

添加一個按鈕

<div id=chatbox> 
    <p><i>15:21</i><b data-c=john>john</b>: hello jack</p> 
    <p><i>15:22</i>i want to tell you something</p> 
    <p><i>17:17</i><b data-c=jack>jack</b>: hi john.</p> 
    <p class=hidden><i>20:15</i>Ο <span data-c=server>server</span> alex joined the chat</p> 
    <p><i>17:17</i><b data-c=alex>alex</b>: hi all of you.</p> 
</div> 
<button id="show_hidden">Show Hidden</button> 

改變風格爲階級，任何未來的元素與那個類別

var button = document.getElementById('show_hidden'), 
    hidden = true; 

button.addEventListener('click', function() { 
    var st = document.getElementById('myStyle'); 

    if (st) { 
     st.innerHTML = '.hidden { display: '+ (hidden?'block':'none') +'; }'; 
    }else{ 
     var css = '.hidden { display: block; }', 
      head = document.head || document.getElementsByTagName('head')[0], 
      style = document.createElement('style'); 

     style.type = 'text/css'; 
     style.id = 'myStyle'; 

     if (style.styleSheet){ 
      style.styleSheet.cssText = css; 
     } else { 
      style.appendChild(document.createTextNode(css)); 
     } 
     head.appendChild(style); 
    } 

    button.innerHTML = (hidden ? 'Hide' : 'Show'); 
    hidden = !hidden; 
}, false); 

FIDDLE