Javascript 如何修复：“在Bootstrap4的div和div中使用JS不起作用，但JS起作用”
我试图隐藏/显示评论。JS工作得很好，因为我在这里找到了解决方案。通过PiggyPlex获得JS解决方案的ty 主要问题是：JS工作良好，但不能适应bootstrap div结构 我不知道如何修复它，或者bootstrap无法让它正常工作。我需要任何信息才能继续前进，否则我就放手了。多谢各位Javascript 如何修复：“在Bootstrap4的div和div中使用JS不起作用，但JS起作用”,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我试图隐藏/显示评论。JS工作得很好，因为我在这里找到了解决方案。通过PiggyPlex获得JS解决方案的ty 主要问题是：JS工作良好，但不能适应bootstrap div结构 我不知道如何修复它，或者bootstrap无法让它正常工作。我需要任何信息才能继续前进，否则我就放手了。多谢各位 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Docu
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
</head>
<body>
<div class="main container-fluid" role="main">
<div class="row mt-5">
<div class="sitter_comments col-md-12 mb-3">
<a href=""><h5>Yorumlar (6)</h5></a>
</div>
<!--first comment-->
<div class="commenter_picture col-md-1">
<img src="images/bakici/asd.PNG" alt="" width="50" height="50">
</div>
<div class="commenter_infos col-md-11">
<h6>Ali A.</h6>
<h7>22.06.2018</h7>
</div>
<div class="customer_comment col-md-12 mt-2">
Köpeğime çok iyi bakmış. Sanki hiç benden gitmemiş gibiydi. Tekrar köpeğimi bırakmayı düşünüyorum.<hr>
</div>
<!--second comment-->
<div class="commenter_picture col-md-1">
<img src="images/bakici/asd.PNG" alt="" width="50" height="50">
</div>
<div class="commenter_infos col-md-11">
<h6>Ali A.</h6>
<h7>22.06.2018</h7>
</div>
<div class="customer_comment col-md-12 mt-2">
Köpeğime çok iyi bakmış. Sanki hiç benden gitmemiş gibiydi. Tekrar köpeğimi bırakmayı düşünüyorum.<hr>
</div>
<!--third comment but hidden-->
<div id="yorumlariGor" style="display:none;">
<div class="commenter_picture_hide col-md-1">
<img src="images/bakici/asd.PNG" alt="" width="50" height="50">
</div>
<div class="commenter_infos_hide col-md-11">
<h6>Ali A.</h6>
<h7>22.06.2018</h7>
</div>
<div class="customer_comment_hide col-md-12 mt-2">
Köpeğime çok iyi bakmış. Sanki hiç benden gitmemiş gibiydi. Tekrar köpeğimi bırakmayı düşünüyorum.<hr>
</div>
</div>
<!--To see all comments-->
<script> function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}</script>
<!--To see all comments-->
<div class="row">
<div class="see_all_comments col-md-12 text-right">
<a href="javascript:showhide('yorumlariGor')">
Tümünü Gör
</a>
</div>
</div>
</div>
</div>
</body>
</html>
额外的div打破了引导网格的概念 请尝试下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css"
/>
<style>
.yorumlariGor {
display: none;
}
</style>
</head>
<body>
<div class="main container-fluid" role="main">
<div class="row mt-5">
<div class="sitter_comments col-md-12 mb-3">
<a href=""><h5>Yorumlar (6)</h5></a>
</div>
<!--first comment-->
<div class="commenter_picture col-md-1">
<img src="images/bakici/asd.PNG" alt="" width="50" height="50" />
</div>
<div class="commenter_infos col-md-11">
<h6>Ali A.</h6>
<h7>22.06.2018</h7>
</div>
<div class="customer_comment col-md-12 mt-2">
Köpeğime çok iyi bakmış. Sanki hiç benden gitmemiş gibiydi. Tekrar
köpeğimi bırakmayı düşünüyorum.
<hr />
</div>
<!--second comment-->
<div class="commenter_picture col-md-1">
<img src="images/bakici/asd.PNG" alt="" width="50" height="50" />
</div>
<div class="commenter_infos col-md-11">
<h6>Ali A.</h6>
<h7>22.06.2018</h7>
</div>
<div class="customer_comment col-md-12 mt-2">
Köpeğime çok iyi bakmış. Sanki hiç benden gitmemiş gibiydi. Tekrar
köpeğimi bırakmayı düşünüyorum.
<hr />
</div>
<!--third comment but hidden-->
<div class="commenter_picture_hide yorumlariGor col-md-1">
<img src="images/bakici/asd.PNG" alt="" width="50" height="50" />
</div>
<div class="commenter_infos_hide yorumlariGor col-md-11">
<h6>Ali A.</h6>
<h7>22.06.2018</h7>
</div>
<div class="customer_comment_hide yorumlariGor col-md-12 mt-2">
Köpeğime çok iyi bakmış. Sanki hiç benden gitmemiş gibiydi. Tekrar
köpeğimi bırakmayı düşünüyorum.
<hr />
</div>
<!--To see all comments-->
<script>
function showhide(id) {
var x = document.getElementsByClassName(id);
for (var i = 0; i < x.length; i++) {
console.log(x[i].style.display);
x[i].style.display =
x[i].style.display == "block" ? "none" : "block";
}
}
</script>
<!--To see all comments-->
<div class="row">
<div class="see_all_comments col-md-12 text-right">
<a href="javascript:showhide('yorumlariGor')">
Tümünü Gör
</a>
</div>
</div>
</div>
</div>
</body>
</html>
你是怎么做到的？你能告诉我你走的另一条路吗？我是说你解决了我的问题。对不起，我的英语不好。再次感谢你！