我在下面有以下jquery。当用户点击.commentCount
时,我希望这个名为#commentSec
的div打开,然后网站上的其他一些元素发生变化。这个jquery块运行良好。
然而,第二个块,名为.closeComments
的关闭按钮的onclick,根本不运行。我究竟做错了什么?我是否必须在第一个jquery部分返回true或其他内容?
$('.commentCount').click( function() {
$('#commentSec').css({ 'display' : 'inline', 'height' : 'auto', 'padding' : '10px', 'padding-bottom' : '0px', 'margin-bottom' : '10px', 'margin-left' : '10px', 'z-index' : '10'});
$('#commentSec h3').css({ 'display' : 'block'});
$('#rightcolumn').css({ 'opacity' : '.3'}); //Transparent rightcolumn
});
第二块:
$('.closeComments').click( function() {
$('#commentSec').css({ 'display' : 'none'});
$(this).css({'opacity' : '.9'});
$('#rightcolumn').css({ 'opacity' : '1'}); //Undo transparent rightcolumn
});
HTML / PHP:
<h3><b>' . $useranswering . '\'s</b> ANSWER</h3><img class="closeComments" src="../Images/bigclose.png" alt="close"/>
<span><a class="prev" >← previous answer</a><a class="next" href="">next answer →</a></span>
<div>
<p>' . $answer . '</p>
<form method=post>
<input type="hidden" value="'. $ansid .'" name="answerid">
<textarea rows="2" cols="33" name="answercomment">Comment on this answer</textarea>
<input type="image" src="../Images/commentSubmit.png"/>
答案 0 :(得分:1)
我想到的唯一问题是,您可能有多个[XX评论]链接,并且有多个[commentsSec]
现在,您只能拥有一个带有一个ID的块。这是一个完美的例子:
<style>
.comment { display: none;}
</style>
<div class="comment-container"><span class="open-comment">[xx comments]<
<div class="comment">Lorem Ipsum<span class="close-comment">[close]<
</div>
<div class="comment-container"><span class="open-comment">[xx comments]<
<div class="comment">Lorem Ipsum<span class="close-comment">[close]<
</div>
<script>
$(document).ready(function(){
$(".open-comment").click(function(){
$(this).parent().find(".comment").show({duration: 1000});
});
$(".close-comment").click(function(){
$(this).parent().hide({duration: 1000});
});
});
</script>