Question

我正在尝试更多地展示，使用jquery和css显示更少的按钮。

我的问题是你对我的代码还有其他好的想法。我使用if else语句，如果我能做得更好，那么if else语句然后我应该怎么做？

我只是：

＆＃13;

$("body").on("click", ".ShowMoreDetails", function(){
  $(".container").toggleClass("active");
  if ($(".ShowMoreDetails").text() == "Show more") {
    $(".ShowMoreDetails").text("Show less");
  }
  else {
    $(".ShowMoreDetails").text("Show more");
  }
});

＆＃13;

.container {
   width:525px;
   margin:0px auto;
   background-color:red;
   box-sizing:border-box;
   border-radius:2px;
   margin-top:50px;
   overflow:hidden;
   position:relative;
   max-height:350px;
}
.footer-M {
   width: 100%;
    min-height: 100px;
   position: absolute;
    bottom: 0px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(bottom top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
    
}
.ShowMoreDetails {
   z-index:999;
   cursor:pointer;
   float:left;
   width:100%;
   text-align:center;
   color:#ffffff;
   text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
   font-family: helvetica, arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
   font-size:14px;
   font-weight:600;
   line-height:40px;
   bottom:0px;
   position:absolute;
}
.column1 {
   width:100%;
   height:300px;
   background-color:blue;
   margin-bottom:10px;
}
.active {
   max-height:none !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="column1"></div>
   <div class="column1"></div>
   <div class="column1"></div>
   <div class="column1"></div>
   <div class="footer-M">
      <div class="ShowMoreDetails">Show More</div>
   </div>
</div>

＆＃13;

Answer 1

您可以使用三元运算符：

a = (condition ? b : c)

与

相同

if (condition) { a = b; } else { a = c };

像这样：

$(".ShowMoreDetails").text(
  $(".container").hasClass('active'‌) ? "Show less" : "Show more";
);

您应该根据 viewstate 决定显示哪个文本，而不是触发元素的文本。

Jquery显示更多，显示更少按钮有任何其他想法

1 个答案: