0

ページが読み込まれるたびに従業員をランダムに選択する従業員スポットライト Web パーツを SharePoint サイトに作成しました。スポットライト セクションには、ユーザー情報リストの「自己紹介」セクションから取得した従業員の略歴があります。バイオが展開可能になり、バイオの数行が最初に表示され、ユーザーが「詳細」リンクをクリックしてテキストを展開して残りを読むことができるようにしようとしています。私が持っているものは機能しますが、固定の高さにジャンプして、<div>

div セクション:

<div id=\"expandable\" >" + Employees[randId].aboutMe +
                "</div><a href=\"javascript:Tog()\">more...</a>

スタイル：

#expandable { height:55px; overflow:hidden; }

展開する簡単なスクリプト:

function Tog() {
    var expandable = document.getElementById('expandable');
    if (expandable.style.height == '400px') {
        expandable.style.height = '55px';
    }
    else {
        expandable.style.height = '400px';
    } 
}

折りたたんだときにテキストの一部を表示しながら、コンテンツを展開するより良い方法はありますか?

4

3 に答える 3

2

コンテンツ全体が表示されるように高さを設定しないでください。代わりに、max-height/overflowが設定されているクラスを削除してください。

HTML

<div id="content" class="collapsed">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
</div>

CSS

div#content{ border: 1px solid black; cursor: pointer;}

div.collapsed{
     max-height: 40px;
    overflow:hidden;
}

JavaScript

var cont = document.getElementById("content");
cont.onclick = function() {
    var newClass = (cont.className==="collapsed") ? "" : "collapsed";
    cont.className = newClass;        
};

JavaScriptは基本的な例であり、複数のクラスを持つことができるように、クラスライブラリの追加/削除を使用することをお勧めします。

例

JSFiddle

于 2012-08-01T19:22:52.293 に答える
2

高さを固定値に設定する代わりに、に設定するだけautoで、divがコンテンツに合わせて拡張されます。

function Tog() {
    var expandable = document.getElementById('expandable');
    if (expandable.style.height) {
        expandable.style.height = '';
    } else {
        expandable.style.height = 'auto';
    } 
}

（jsfiddle.netでのデモ）。

更新： Bergiによって提案されているように、インラインJS（href="javascript:Tog()"）を適切なイベントリスナーに置き換えることも検討してください。

于 2012-08-01T19:23:46.210 に答える
0

これが私のコメントで言ったことの実例です。デフォルトでは、divはそのコンテンツに必要なスペースをすべて使用します。shortクラスを要素に追加することにより、ディメンションに制限します。トグル関数は、このクラスを追加および削除するだけです。

HTML

<div id="expandable" class="short">Content here</div>
<a href="#" onclick="toggle()">more...</a>

CSS

.short {
  height: 200px;
  overflow: hidden;
}

JS

function toggle() {
  var elem = document.getElementById("expandable");

  if(hasClass(elem, "short"))
    removeClass(elem, "short");
  else
    elem.className = elem.className + " short";
}

//These functions from http://stackoverflow.com/a/2155755/219118
function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
  }
}
于 2012-08-01T19:22:36.877 に答える