显示：无样式不起作用

Question

我已经阅读了SO上的一些帖子，但就我而言，我正在关注所有这些内容，但仍显示：none不会隐藏该元素。 这是代码

 jQuery(function($) { var socket = io.connect(); var $messageForm = $('#message-box'); var $messageBox = $('#message'); var $chat = $('#chat'); var $users = $('#users'); var $nickForm = $('#setNick'); var $nickError = $('#nickError'); var $nickBox = $('#nickname'); $('#message').keydown(function(event) { if (event.keyCode == 13) { $(this.form).submit() return false; } }); $nickForm.submit(function(e) { e.preventDefault(); socket.emit('new user', $nickBox.val(), function(data) { if (data) { $('#nickWrap').hide(); console.log("Showing Content Wrap"); $('#contentWrap').show(); } else { $nickError.html("That nickname is already taken , try something else"); } }); $nickBox.val(''); }); socket.on('usernames', function(data) { var html = '<ul>'; for (i = 0; i < data.length; i++) { html += '<li>' + data[i] + '</li>'; } html = html + '</ul>'; $users.html(html); }); $messageForm.submit(function(e) { e.preventDefault(); socket.emit('send message', $messageBox.val(), function(data) { $chat.append("<span class='error'>" + data + "</span><br/>"); }); $messageBox.val(''); }); socket.on('new message', function(data) { $chat.append("<span class='msg'><b>" + data.nick + " :</b>" + data.msg + "</span><br/>"); }); socket.on('whisper', function(data) { $chat.append("<span class='whisper'><b>" + data.nick + " :</b>" + data.msg + "</span><br/>"); }); socket.on('private', function(data) { $chat.append("<span class='whisper'><b>" + data.nick + " :</b>" + data.msg + "</span><br/>"); }); });

  html { background-color: #a79580 !important; } body { padding-top: 20px; font-size: 16px; background: transparent; } #contentWrap { display: none !important; } .whisper { color: grey; font-style: italic; } .error { color: red; }

 <html> <head> <title>Socket IO</title> <link href="/css/bootstrap.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div class="container"> <div class="row"> <div class="" align="center" id="nickWrap"> <img height="500" width="500" class="img-circle" src="/images/minion.jpg" /> <h3>Pick your super awesome nickname</h3> <p id="nickError"></p> <div class="form-group"> <form id="setNick" role="form"> <input type="text" autofocus required placeholder="Your nickname" id="nickname" /> <input class="btn btn-primary" type="submit" value="Submit" /> </form> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-offset-1 panel panel-primary"> <div class="panel-body" style="min-height: 400;max-height: 400;overflow-y: scroll;"> <div id="contentWrap"> <div id="chatWrap"> <div id="chat"></div> </div> </div> </div> </div> <br/> <div class="col-md-4 col-sm-offset-1 panel panel-default"> <div class="panel-heading">Chat</div> <div class="panel-body"> <div align="left" id="users"></div> </div> </div> </div> </div> <br/> <div class="row"> <div class="col-md-3 col-md-offset-2"> <form id="message-box"> <div class="form-group"> <textarea rows="3" cols="60" id="message" placeholder="Write your message and press enter.."></textarea> </div> </form> </div> </div> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.4/socket.io.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css"></script> <script> </script> </body> </html>

我试图隐藏ID为contentWrap的div，但是display：none样式不起作用，即使我使用！important来确保它能覆盖其他任何冲突的样式 。 不知道我在做什么错

Answer 1

您可能会触发一些事情

$('#message').keydown(function(event) {
    if (event.keyCode == 13) {
        $(this.form).submit()
        return false;
     }

当您的页面加载，然后应用$('#contentWrap').show();

Answer 2

知道了，页面加载时我不想显示在两个div以下。

<div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-offset-1 panel panel-primary">
            <div class="panel-body" style="min-height: 400;max-height: 400;overflow-y: scroll;">
               <div id="contentWrap">
                  <div id="chatWrap">
                      <div id="chat"></div>            
                  </div>
               </div>
            </div>
        </div>
   <br/>
      <div class="col-md-4 col-sm-offset-1 panel panel-default">
        <div class="panel-heading">Chat</div>
         <div class="panel-body">
            <div align="left" id="users"></div>
        </div>
      </div>


   </div>
 </div>

和

<div class="row">

  <div class="col-md-3 col-md-offset-2">
    <form id="message-box">
      <div class="form-group">
       <textarea rows="3" cols="60" id="message" placeholder="Write your message and press enter.."></textarea>
      </div>
   </form>
</div>

</div>

所以我只是将这两个div包裹在一起

<div id="chatWindow">

 <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-offset-1 panel panel-primary">
            <div class="panel-body" style="min-height: 400;max-height: 400;overflow-y: scroll;">
               <div id="contentWrap">
                  <div id="chatWrap">
                      <div id="chat"></div>            
                  </div>
               </div>
            </div>
        </div>
   <br/>
      <div class="col-md-4 col-sm-offset-1 panel panel-default">
        <div class="panel-heading">Chat</div>
         <div class="panel-body">
            <div align="left" id="users"></div>
        </div>
      </div>


   </div>
 </div>





<br/>
<div class="row">

  <div class="col-md-3 col-md-offset-2">
    <form id="message-box">
      <div class="form-group">
       <textarea rows="3" cols="60" id="message" placeholder="Write your message and press enter.."></textarea>
      </div>
   </form>
</div>

</div>

    </div>

稍后在检查了一些条件之后，我使用

$('#chatWindow').show();

显示：无样式不起作用

问题描述

2 个解决方案

解决方案1
0 2016-01-14 18:38:30

解决方案2
0 2016-01-14 18:44:35

显示：无样式不起作用

问题描述

2 个解决方案

解决方案1 0 2016-01-14 18:38:30

解决方案2 0 2016-01-14 18:44:35

解决方案1
0 2016-01-14 18:38:30

解决方案2
0 2016-01-14 18:44:35