.hide（）div不起作用

Question

当某人单击类为“ cwindow”的div时，我正在尝试关闭我的评论部分。我仔细检查了class / id并在jsfiddle.net上运行它，它的工作原理非常好！有人可以帮忙吗？我缺少明显的东西吗？

这是我的html和CSS

$(document)
  .ready(function() {
    $(".cwindow")
      .click(function() {
        $('#comment')
          .hide();
      });
  });

#comment {
  border: 1px solid #333;
  margin-top: 15px;
  position: relative;
  z-index: 3;
}

.commentWrite {
  padding: 10px 20px;
  height: auto;
}

.cwindow {
  font-size: 12px;
  color: #333;
  text-align: right;
  margin: 2px;
  position: relative;
  z-index: 5;
}

.cwindow i {
  padding-right: 3px;
}

.cwindow i:hover {
  cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), auto !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div id="comment">
  <div class="cwindow"><i class="xi xi-minus"></i><i class="xi xi-checkbox-blank"></i><i class="xi xi-close"></i></div>
  <s_rp_input_form>
    <div class="commentWrite"></div>
  </s_rp_input_form>
</div>

jsfiddle

Answer 1

这可能会帮助您，更改了CSS中的某些样式

#comment {
  border: 1px solid #333;
  margin-top: 15px;
  position: relative;
  z-index: 3;
  height: 100px;
}

.commentWrite {
  padding: 10px 20px;
  height: auto;
}

.cwindow {
  font-size: 12px;
  color: #333;
  margin: 2px;
  position: absolute;
  z-index: 5;
  right: 5%;
  width: 10px;
}

.cwindow i {
  padding-right: 3px;
}

.cwindow i:hover {
  cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), auto !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $(".cwindow").click(function() {
      $('#comment').hide();
    });
  });
</script>

<div id="comment">
  <div class="cwindow"><i class="xi xi-minus"></i><i class="xi xi-checkbox-blank"></i><i class="xi xi-close">close</i></div>
  <s_rp_input_form>
    <div class="commentWrite"></div>
  </s_rp_input_form>
</div>

Answer 2

.cwindow位于#comment的顶部，事件仅在此区域有效。

Answer 3

#comment { border: 1px solid #333; margin-top: 15px; position: relative; z-index: 3; }
.commentWrite { padding: 10px 20px; height: auto;}
.cwindow { font-size: 12px; color: #333; text-align: right; margin: 2px; position: relative; z-index: 5; }
.cwindow i {padding-right: 3px; }
.cwindow i:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), auto !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $(".cwindow").click(function () {
        $('#comment').hide();
    });
});
</script>
<div class="cwindow">
       <div id="comment">
				 <i class="xi xi-minus"></i><i class="xi xi-checkbox-blank"></i><i class="xi xi-close"></i></div>
         <s_rp_input_form>
         <div class="commentWrite"></div>
         </s_rp_input_form></div>
        

我用div“ cwindow”包装了您的类“ comment”，然后它起作用了。希望能解决您的问题。

Link to Fiddle

编辑：我现在注意到您的班级目前位于右上角。如果您在框内单击，则会将其关闭。