Question

$('.more2').each(function() {       
    var showChar = 150;
    var content = $(this).html();
        if(content.length > showChar) {
            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);
            var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span>  <a href="" class="morelink">' + moretext + '</a></span>';
            $(this).html(html);
    }
});

我正在尝试为我的div下拉构建一些jquery Accordion效果;请参阅示例JSFIDDLE。这里我想要的实际上是点击（'+'）按钮我想要显示内容的扩孔部分。在那个时候，同一行中的div应该采用相同的高度，这是所采用的活动div，但我们不希望在非活动div中显示内容。

Answer 1

尝试添加到您的文档中：

$('a.morelink').click(function(){
    $(this).parent().find('span').toggle();
    $(this).parent().parent().find('span.moreellipses').toggle();
    $(this).parent().find('a').text($(this).text() == '[+]' ? "[-]" : "[+]");
    return false;
});

并替换：

$(".row1").height(maxHeight);

与

$(".row1").css({'min-height':maxHeight,'height':'auto'});

所以你的代码可能是：

	$(document).ready(function() {
	  var maxHeight = 0;
	  $(".row1").each(function() {
	    if ($(this).height() > maxHeight) {
	      maxHeight = $(this).height();
	    }
	  });
	  $(".row1").css({
	    'min-height': maxHeight,
	    'height': 'auto'
	  });
	});
	$(document).ready(function() {
	  var ellipsestext = "...";
	  var moretext = "[+]";
	  var lesstext = "[-]";
	  $('.more1').each(function() {
	    var showChar = 172;
	    var content = $(this).html();

	    if (content.length > showChar) {

	      var c = content.substr(0, showChar);
	      var h = content.substr(showChar, content.length - showChar);

	      var html = c + '<span class="moreellipses">' + ellipsestext + ' </span><span class="morecontent"><span>' + h + '</span>  <a href="" class="morelink">' + moretext + '</a></span>';

	      $(this).html(html);
	    }

	  });
	  $('.more2').each(function() {
	    var showChar = 150;
	    var content = $(this).html();

	    if (content.length > showChar) {

	      var c = content.substr(0, showChar);
	      var h = content.substr(showChar, content.length - showChar);

	      var html = c + '<span class="moreellipses">' + ellipsestext + ' </span><span class="morecontent"><span>' + h + '</span>  <a href="" class="morelink">' + moretext + '</a></span>';

	      $(this).html(html);
	    }

	  });

	  $('a.morelink').click(function() {
	    $(this).parent().find('span').toggle();
	    $(this).parent().parent().find('span.moreellipses').toggle();
	    $(this).parent().find('a').text($(this).text() == '[+]' ? "[-]" : "[+]");
	    return false;
	  });
	});

spk_desc {
  font-size: 11px;
  line-height: 15px;
  padding: 15px;
  position: relative;
  top: 0;
}
.speaker_content_text_alt {
  background: #eeeeee none repeat scroll 0 0;
  padding: 5px;
  position: relative;
  width: 200px;
}
.speaker_content_text {
  background: #dddddd none repeat scroll 0 0;
  padding: 5px;
  position: relative;
  width: 200px;
}
.fl {
  float: left;
}
a {
  color: #0254EB
}
a:visited {
  color: #0254EB
}
a.morelink {
  text-decoration: none;
  outline: none;
}
.morecontent span {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="speaker_content" class="visible-desktop">
  <div id="row1">
    <div class="speaker_content_text_alt   fl">
      <a name=""></a>
      <div class="speaker_name">
        <p style=" font-size:25px; padding top: 10px; ">ironMAn
          <br/>
        </p>
      </div>
      <div class="spk_desc row1">
        <p style="line-height:19px;" class="comment more1">I´ve create a template for meteor.js, what I want is to apply a jQuery effect for an onclick event on tran_button, the idea with the effect is that div associated to button disappear. I don´t get any error through meteor console, or firebug console.
          He has written apps for the iPhone and the iPad since the SDKs first appeared and has written programs for the Mac all the way back to System 7.
          <br>Daniel presents iPhone, Cocoa, and Swift training and consults through his company He is the host of the and are available on the Editors Cut website.</p>
      </div>
    </div>
    <div class="speaker_content_text   fl">
      <a name=""></a>
      <div class="speaker_name">
        <p style="font-size:25px;padding-top:10px; ">
          Supeeer man
          <br/>
        </p>
      </div>
      <div class="spk_desc row1">
        <p style="line-height:19px;" class="comment more2">
          I understand this is a privilege that is earned by gaining 2,000 reputation on the site. As far as I can see, that is the only requirement - there doesn't seem to be any restrictions on where you get that rep from. For instance, I got mine mostly through
          answers and a few questions - I think I may have made one suggested edit before gaining this privilege which allows me to edit anything, without peer review..
          <br>Please note - I'm not trying to suggest that there are roving bands of 2K users rampantly defiling posts left and right; rather this is more focussed on introducing a learning curve for edits, rather than allowing users who may have no idea
          how to edit a post edit anything.
        </p>
      </div>
    </div>

  </div>
</div>

如何将jquery省略号应用于div

1 个答案: