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

单击该按钮时，您只需在showHidden元素上切换#chatbox类，然后使用CSS隐藏或显示其中的所有隐藏项目。

CSS：

.hidden {
  display: none;
}

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

jQuery的：

$(document).ready( function() {

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

});

Answer 2

添加按钮

<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

Answer 3

如果使用jquery在http://api.jquery.com/toggle/

查找.toggle

另见javascript答案：Jquery .toggle replacement code

如何切换班级的风格？

3 个答案: