HTML页面自动重新加载

HTML page reloads automatically

本文关键字：加载 新加载 HTML      更新时间：2023-09-26

我的HTML页面如下:

$(document).ready(function() {
  var showChar = 380;
  var ellipsestext = "...";
  var moretext = "Read more";
  var lesstext = "Read less";
  var lesshtml="";
  var morehtml="";
  var content = $(".more").html();
  if(content.length > showChar) {
    var lastChar = content.charAt(showChar);
    if(lastChar == '/'){
      showChar = showChar+1;
    }
    var c = content.substr(0, showChar);
    var h = content.substr(showChar-1, content.length - showChar);
    var lesshtml = c + '<span class="moreelipses">'+ellipsestext+' <a href="" class="morelink">'+moretext+'</a></span>';
    var morehtml = content + '<span><a href="" class="morelink">'+lesstext+'</a></span>';
    $(".more").html(lesshtml);
  }
  $(".morelink").click(function(){
    if ($(this).text()==moretext){
      $(".more").html(morehtml);
    }else{
      $(".more").html(lesshtml);
    }
    return false;
  });
});
a {
  color: #EA7813
}
a:visited {
  color: #EA7813	
}
a.morelink {
  text-decoration:none;
  outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="more">
  <p>Can't reach the light switch when you walk into a room? Need one added near the door? If you would like to have a switch professionally installed in a location where no switch currently exists, one of our vetted, <strong>local electrical professionals</strong> will take care of your <strong>light switch installation </strong>and make sure it's working smoothly.</p>
  <p><strong>What's included:</strong></p>
  <ul>
    <li>Install one (1) new gang box and associated wiring extension from existing circuit (up to 25')</li>
    <li>Install and pair one (1) <strong>customer-supplied</strong> smart light switch in a new location <strong>-OR-</strong> provide and install one (1) standard single-pole switch and cover plate</li>
    <li>Ensure all features are operating to maximum performance</li>
    <li>Demonstrate basic device features</li>
    <li>90-day labor warranty</li>
  </ul>
  <p><strong>Out of scope:</strong></p>
  <ul>
    <li>Smart switch not included, price includes installation only of smart switch -OR- providing and installing a standard switch</li>
    <li>Requires existing, accessible electrical circuit within 25'</li>
    <li>Drywall patching &amp; painting</li>
    <li>Requires existing, compatible network</li>
    <li>No diagnostic, repair or parts are included with this service</li>
    <li>No non-stock parts, materials or system repair / upgrades are included with this service</li>
  </ul>
</div>

我想要的是扩大和缩小主体。扩展工作正常，但当我收缩，页面重新加载。我想停止重新装填。在我的click函数中，永远不会触发else部分。相反，页面会重新加载。我想停止重新加载并运行else中的代码，以便正文适当收缩。

try this

    $(document).on('click', '.morelink', function(){
      if ($(this).text()==moretext){
        $(".more").html(morehtml);
      } else {
        $(".more").html(lesshtml);
      }
      return false;
    });

委托活动

 $('body').on('click','.morelink',function(e){
   e.preventDefault();
   //other code 
 });

代替在href中使用#，您可以在href中使用javascript:;，这将不会让url更改

var lesshtml = c + '<span class="moreelipses">'+ellipsestext+' <a href="javascript:;" class="morelink">'+moretext+'</a></span>';
            var morehtml = content + '<span><a href="javascript:;" class="morelink">'+lesstext+'</a></span>';
            $(".more").html(lesshtml);
           }
相关文章：