时间戳

首页 > 解决方案 > 按钮有故障，我必须单击两次才能显示信息，并且照片没有正确对齐，这是为什么？

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>

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

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

标签： htmlcss

解决方案

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

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

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

然后使用以下内容：

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

推荐阅读