基于JavaScript實現(xiàn)評論框展開和隱藏功能
1.效果圖如下所示,
點擊評論會在對應(yīng)的評論區(qū)域展開評論輸入框,點擊取消會取消對應(yīng)的評論輸入框
2.html代碼:需要引入jQuery.js
<div class="nr-comment"> <div class="nr-comment-con"> <div class="nr-comment-nav"> <div class="comment-number"> <span>493</span> <span>條評論</span> </div> <div class="comment-sort"> 切換為時間排序 </div> </div> <div class="comment-content"> <div class="com-users"> <div class="comment-user"> <span>知乎用戶</span> <div class="comment-user-content"> 這個爬蟲真的好強(qiáng)大! </div> </div> <div class="comment-time"> <div>2017.10.01 21:32:30</div> <button class="btn btn-primary btn-sm btn-reply">回復(fù)</button> </div> </div> <div class="user-reply"> <duv class="reply-in"> <input type="text" value="" name="" placeholder="請輸入評論內(nèi)容" /> </duv> <div class="reply-buttons"> <button type="button" class="btn btn-primary btn-comment btn-sm">評論</button> <button type="button" class="btn btn-default btn-cancel btn-sm">取消</button> </div> </div> </div> <div class="comment-content"> <div class="com-users"> <div class="comment-user"> <span>知乎用戶</span> <div class="comment-user-content"> 這個爬蟲真的好強(qiáng)大! </div> </div> <div class="comment-time"> <div>2017.10.01 21:32:30</div> <button class="btn btn-primary btn-sm btn-reply">回復(fù)</button> </div> </div> <div class="user-reply"> <duv class="reply-in"> <input type="text" value="" name="" placeholder="請輸入評論內(nèi)容" /> </duv> <div class="reply-buttons"> <button type="button" class="btn btn-primary btn-comment btn-sm">評論</button> <button type="button" class="btn btn-default btn-cancel btn-sm">取消</button> </div> </div> </div> <div class="comment-content"> <div class="com-users"> <div class="comment-user"> <span>知乎用戶</span> <div class="comment-user-content"> 這個爬蟲真的好強(qiáng)大! </div> </div> <div class="comment-time"> <div>2017.10.01 21:32:30</div> <button class="btn btn-primary btn-sm btn-reply">回復(fù)</button> </div> </div> <div class="user-reply"> <duv class="reply-in"> <input type="text" value="" name="" placeholder="請輸入評論內(nèi)容" /> </duv> <div class="reply-buttons"> <button type="button" class="btn btn-primary btn-comment btn-sm">評論</button> <button type="button" class="btn btn-default btn-cancel btn-sm">取消</button> </div> </div> </div> <div class="comment-content"> <div class="com-users"> <div class="comment-user"> <span>知乎用戶</span> <div class="comment-user-content"> 這個爬蟲真的好強(qiáng)大! </div> </div> <div class="comment-time"> <div>2017.10.01 21:32:30</div> <button class="btn btn-primary btn-sm btn-reply">回復(fù)</button> </div> </div> <div class="user-reply"> <duv class="reply-in"> <input type="text" value="" name="" placeholder="請輸入評論內(nèi)容" /> </duv> <div class="reply-buttons"> <button type="button" class="btn btn-primary btn-sm btn-comment">評論</button> <button type="button" class="btn btn-default btn-sm btn-cancel">取消</button> </div> </div> </div> <div class="comment-ipt"> <input type="text" placeholder="輸入你的評論"> <button type="submit" class="btn btn-sm btn-primary">評論</button> </div> </div> </div>
3.css樣式代碼,樣式無所謂,自己寫就可以。
.nr-comment { width: 100%; border-right: 1px solid #A9A9A9; border-left: 1px solid #A9A9A9; } .nr-comment .nr-comment-con { width: 100%; } .nr-comment .nr-comment-con .nr-comment-nav { width: 100%; height: 40px; border-bottom: 1px solid #F5F5F6; border-right: 1px solid #A9A9A9; border-left: 1px solid #A9A9A9; background-color: #1E8CE0; } .nr-comment .nr-comment-con .nr-comment-nav .comment-number { float: left; width: 85px; height: 30px; text-align: center; margin-top: 5px; color: white; line-height: 2.3em; } .nr-comment .nr-comment-con .nr-comment-nav .comment-sort { float: right; width: 110px; height: 30px; margin-top: 5px; margin-right: 10px; line-height: 2em; color: white; } .nr-comment .nr-comment-con .comment-content { width: 100%; margin-top: 10px; border-bottom: 1px solid #a9a9a9; } .nr-comment .nr-comment-con .comment-content .com-users { width: 100%; min-height: 60px; } .nr-comment .nr-comment-con .comment-content .com-users .comment-user { float: left; width: 500px; height: 60px; } .nr-comment .nr-comment-con .comment-content .com-users .comment-user span { color: black; margin-left: 10px; } .nr-comment .nr-comment-con .comment-content .com-users .comment-user .comment-user-content { width: 90%; height: 60px; margin-left: 10px; } .nr-comment .nr-comment-con .comment-content .com-users .comment-time { float: right; width: 190px; height: 60px; text-align: center; color: #9CADC6; font-size: 0.9em; text-align: right; } .nr-comment .nr-comment-con .comment-content .com-users .comment-time div { margin-right: 15px; } .nr-comment .nr-comment-con .comment-content .com-users .comment-time .btn-reply { margin-top: 5px; border-radius: 4px; border: none; background-color: #1BB394; color: white; margin-right: 15px; } .nr-comment .nr-comment-con .comment-content .user-reply { display: none; width: 100%; height: 50px; } .nr-comment .nr-comment-con .comment-content .user-reply .reply-in { float: left; width: 85%; height: 50px; } .nr-comment .nr-comment-con .comment-content .user-reply .reply-in input { width: 100%; height: 30px; margin-top: 10px; margin-left: 10px; } .nr-comment .nr-comment-con .comment-content .user-reply .reply-buttons { float: right; margin-top: 10px; } .nr-comment .nr-comment-con .comment-content .user-reply .reply-buttons .btn-comment { float: right; margin-right: 14px; background-color: #1BB394; border: none; color: white; } .nr-comment .nr-comment-con .comment-content .user-reply .reply-buttons .btn-cancel { float: right; margin-right: 10px; } .nr-comment .nr-comment-con .comment-ipt { width: 100%; height: 40px; border-bottom: 1px solid #A9A9A9; margin-top: 10px; } .nr-comment .nr-comment-con .comment-ipt input { display: block; width: 92%; height: 30px; float: left; font-size: 14px; margin-left: 10px; } .nr-comment .nr-comment-con .comment-ipt button { display: block; float: right; background-color: #1BB394; color: white; margin-right: 13px; border: none; }
4.js控制對應(yīng)評論按鈕事件。
<script> $(document).ready(function() { $('.btn-reply').click(function() { // console.log($(this).index()); // 獲取回復(fù)按鈕集合,getElementByClassName; var m = document.getElementsByClassName("btn-reply"); var n = document.getElementsByClassName("user-reply"); console.log('回復(fù)按鈕集合' + m); // 獲取回復(fù)按鈕的索引 var index = $(".btn-reply").index($(this)); console.log(index); $(".user-reply").eq(index).css("display", "block"); }); $('.btn-cancel').click(function() { var m = document.getElementsByClassName("btn-reply"); var n = document.getElementsByClassName("user-reply"); var index = $(".btn-cancel").index($(this)); console.log(index); $(".user-reply").eq(index).css("display", "none"); }); }); </script>
總結(jié)
以上所述是小編給大家介紹的基于JavaScript實現(xiàn)評論框展開和隱藏功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery實現(xiàn)select下拉框美化特效代碼分享
這篇文章主要介紹了jquery實現(xiàn)select下拉框美化特效,實現(xiàn)效果簡潔大方,推薦給大家,有需要的小伙伴可以參考下。2015-08-08Javascript保存網(wǎng)頁為圖片借助于html2canvas庫實現(xiàn)
借助于html2canvas庫,把網(wǎng)頁保存為Canvas畫布,再把生成的canvas保存成圖片,下面的示例,大家可以看看2014-09-09javascript框架設(shè)計讀書筆記之字符串的擴(kuò)展和修復(fù)
本文是司徒正美的《javascript框架設(shè)計》的第三章第一節(jié)的讀書筆記,簡單介紹了javascript字符串的擴(kuò)展和修復(fù),小伙伴們參考下吧2014-12-12js數(shù)組常用操作方法小結(jié)(增加,刪除,合并,分割等)
這篇文章主要介紹了js數(shù)組常用操作方法,結(jié)合實例總結(jié)了javascript數(shù)組的增加、刪除、合并、分割等操作技巧,需要的朋友可以參考下2016-08-08