仅对单击按钮的div进行动画处理
[英]Animate only div of clicked button
问题描述
如果段落扩展了特定的高度，我想隐藏div的文本，然后单击一个将高度更改为完全的按钮，但是通过单击该按钮，所有div都会受到影响，在这种情况下，我只想对该按钮的父div进行动画处理，而不仅仅是行只有扩展该高度的第一个div会受到按钮单击的影响
$(document).ready(function() { var text = $('.description'), btn = $('.btn-overflow'), h = text[0].scrollHeight; if(h > 120) { btn.addClass('less'); btn.css('display', 'block'); } $(".emp-bio .btn-overflow").click(function(e) { e.stopPropagation(); e.preventDefault(); if ($(this).hasClass('less')) { $(this).removeClass('less'); $(this).addClass('more'); $(this).text('Show less'); text.animate({'height': h}); } else { $(this).addClass('less'); $(this).removeClass('more'); $(this).text('Show more'); text.animate({'height': '120px'}); } }); });
.description { width: 250px; height: 120px; display: block; overflow: hidden; word-break: break-word; word-wrap: break-word; }
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="emp-bio"> <div class="description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <a class="btn-overflow" href="#">Show more</a> </div> <div class="emp-bio"> <div class="text-overflow"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <a class="btn-overflow" href="#">Show more</a> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script type="text/javascript" src="script.js"></script> </body> </html>
1 个解决方案
解决方案1
1 2018-12-09 22:36:38
希望我的摘要可以以某种方式对您有所帮助。
祝你今天愉快，，
$(document).ready(function() { var text = $('.description'), btn = $('.btn-overflow'), h = text[0].scrollHeight; if(h > 120) { btn.addClass('less'); btn.css('display', 'block'); } $(".emp-bio .btn-overflow").click(function(e) { e.stopPropagation(); e.preventDefault(); if ($(this).hasClass('less')) { $(this).removeClass('less'); $(this).addClass('more'); $(this).text('Show less'); //use siblings to access .description in same level. $(this).siblings( ".description" ).animate({'height': h}); } else { $(this).addClass('less'); $(this).removeClass('more'); $(this).text('Show more'); //use siblings to access .description in same level. $(this).siblings( ".description" ).animate({'height': '120px'}); } }); });
.description { width: 250px; height: 120px; display: block; overflow: hidden; word-break: break-word; word-wrap: break-word; }
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="emp-bio"> <div class="description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <a class="btn-overflow" href="#">Show more</a> </div> <div class="emp-bio"> <div class="description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <a class="btn-overflow" href="#">Show more</a> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script type="text/javascript" src="script.js"></script> </body> </html>
单击“ jquery”的“右”按钮时，如何使该div动画以向左滑动？
[英]How can I animate this div to slide left when the 'right' button is clicked jquery?
如果单击div中的单选按钮，则单击其他div中的相应单选按钮
[英]If radio button in div is clicked then corresponding radio button in other div is clicked
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.