Question

我有以下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>

我想要的是扩张和缩小身体。扩展工作正常，但当我缩小时，页面重新加载。我想停止重装。在我的点击功能中， else 部分永远不会被触发。相反，页面重新加载。我想停止重新加载并运行 else 中的代码，以便正确收缩。

Answer 1

试试这个

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

Answer 2

委派您的活动

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

Answer 3

您可以在href中使用#代替href中的javascript:;，而不会让网址更改

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);
           }

HTML页面会自动重新加载

3 个答案: