Question

我正在尝试隐藏/显示评论。 JS工作正常，因为我在这里找到了解决方案。（通过How can I hide/show a div when a button is clicked?使用该JS解决方案“ PiggyPlex”）

主要问题是：JS可以正常运行，但不能适应bootstrap 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">

</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>

example of my code

Answer 1

额外的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>

如何解决：“在Bootstrap 4的div和Div中使用JS无效，但是JS有效”

1 个答案: