html - 按钮出现故障，我必须单击两次以显示信息，并且照片未正确对齐，这是为什么？

我正在尝试创建一个隐藏信息并显示信息的按钮。所有内容都在标签中。此代码有两个问题。

1. You have to click the button twice to reveal information.
2. When information is revealed the pictures don't align like it should.. it gets moved to the middle then the right.

我该如何解决这些问题。

$(document).ready(function() {
     $("#toggle").click(function() {
    var elem = $("#toggle").text();
    if (elem == "More News >") {
      //Stuff to do when btn is in the read more state
      $("#toggle").text("Read Less");
      $("#text").slideDown();
     } else {
      //Stuff to do when btn is in the read less state
      $("#toggle").text("More News >");
      $("#text").slideUp();
     }
    });
    });

#text{
       display:none;
        }

    .btn-container{
      margin: auto;
      height:44px;
      width:166.23px;

       }

        button{
        user-select:none;
       -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
       cursor:pointer;
        border: solid 1px;
         padding:8px;
        font-size:1em;
       background: transparent;
       color:black;
        box-sizing:border-box;
     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2  style = "text-align:center;" > All Stories</h2>

      <hr> </hr>
       <div class="smallSpacer">


      <div class="row">
        <div class ="col-sm-6" style = "text-align:left;">
          <p class="#"  style = "color:lightgray;  ">Jan, 01, 2019 </p>
           <small>Title of the news article will be diplayed under the photo. </small>
        </div>

          <div class ="col-sm-6" style = "text-align: right;">
            <img src = "/images/news1.jpg" style = "height:200px; width:300px; ">
           </div>
     </div>

      <hr> </hr>

      <div class="row">
        <div class ="col-sm-6" style = "text-align:left;">
          <p class="#"  style = "color:lightgray;  ">Jan, 01, 2019 </p>
           <small>Title of the news article will be diplayed under the photo. </small>
        </div>

          <div class ="col-sm-6" style = "text-align: right;">
            <img src = "/images/news2.jpg" style = "height:200px; width:300px; ">
           </div>
     </div>

     <hr> </hr>

      <div class="row">
        <div class ="col-sm-6" style = "text-align:left;">
          <p class="#"  style = "color:lightgray;  ">Jan, 01, 2019 </p>
           <small>Title of the news article will be diplayed under the photo. </small>
        </div>

          <div class ="col-sm-6" style = "text-align: right;">
            <img src = "/images/news3.jpg" style = "height:200px; width:300px; ">
           </div>
     </div>

     <hr> </hr>
     <div class="smallSpacer">


      <div>
        <br>
        <span id="text">

        <div class="row">
        <div class ="col-sm-6" style = "text-align:left;">
          <p class="#"  style = "color:lightgray;  ">Jan, 01, 2019 </p>
           <small>Title of the news article will be diplayed under the photo. </small>
        </div>

          <div class ="col-sm-6" style = "text-align: right;">
            <img src = "/images/news2.jpg" style = "height:200px; width:300px; ">
           </div>
     </div>

     <hr> </hr>

      <div class="row">
        <div class ="col-sm-6" style = "text-align:left;">
          <p class="#"  style = "color:lightgray;  ">Jan, 01, 2019 </p>
           <small>Title of the news article will be diplayed under the photo. </small>
        </div>

          <div class ="col-sm-6" style = "text-align: right;">
            <img src = "/images/news3.jpg" style = "height:200px; width:300px; ">
           </div>
     </div> <br>

      </div>
      <div class="btn-container">
        <button id="toggle"> More News > </button>
      </div>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

      <div class="bigSpacer"></div>
      </span>

       </section>

预期：按钮应一键显示信息，图像应向右对齐。

实际：有一个小故障，您必须单击两次以显示信息，并且图像先到达页面中心后才向右对齐。

最佳答案

第一次单击未注册的原因可能是因为html <button id="toggle"> More News > </button>中的确切文本与jquery代码$("#toggle").text("More News >");不同。因此，第一次单击时，触发else语句，分配“ More News>”按钮，然后切换到该按钮。

要解决此问题，您可能需要向切换按钮添加属性

<button id="toggle" toggle="expand">More News ></button>

然后使用以下命令：

if($("#toggle").attr("toggle") === "expand") {
  $("#text").css("display", "inline");
  $("#toggle").attr("toggle", "shrink");
}