配列値にコンテンツを追加する

Question

リストの最初の5つの要素を表示していて、残りの値を表示するリンクがあります。

JS

<script> 
    document.addEventListener('DOMContentLoaded', function() { 
     document.addEventListener('click', function(clickEvent) { 
      if (clickEvent.target.id == 'showMore') { 
       linksList.classList.add('expanded'); 
      document.getElementById("showMore").style.display = 'none'; 
      } 
     }); 
    }); 
</script> 

CSS

 #linksList li.more-vs { 
    display: none; 
    } 
    #linksList.expanded li { 
    display: list-item; 
     } 
    </style> 

PHPの

<ul id="linksList"> 
    <?php 
    foreach($specializations as $index => $ac){ 
     $class = ''; 
     if ($index > 4) { 
      $class = 'class="more-vs"'; 
     } 
     echo '<li '.$class.'><a class="quicksearchid" qs_id="'.$ac->spId.'" href="#">'.$ac->spName.'</a></li>'; 
    } 
    ?> 
    <li><a href="#" id="showMore" >More<i class="fa fa-caret-down" aria-hidden="true"></i></a></li> 
</ul> 

は今、私はそれが5に戻って以下のリンクをクリックすると、シュリンク（少ない）リンクを追加したい

トグルのようなアイテム。

Answer 1

同じアンカー要素と機能を使用して、非表示/表示の両方を処理できます。

また、既存のソースコードの一部を整理しましたが、特定のアンカータグがクリックされた場合にのみアクションを実行する場合は、なぜドキュメント全体にイベントリスナーclickが設定されるのかわかりませんでした。

ソースコード内にコメントを挿入して各行を説明しました。

document.addEventListener('DOMContentLoaded', function() { 
 
    //Set click event to showMore anchor 
 
    document.getElementById('showMore').addEventListener('click', function(clickEvent) { 
 
    //Target unordered list - linksList 
 
    var Mylist = document.getElementById('linksList'); 
 
    //Toggle linkLists class 
 
    Mylist.classList.toggle('expanded'); 
 
    //Does linkList have class expanded? 
 
    if (Mylist.classList[0] == 'expanded') { 
 
     //Change anchor innerHTML to Less and fontawesome 
 
     this.innerHTML = 'Less<i class="fa fa-caret-up" aria-hidden="true"></i>'; 
 
    } else { 
 
     //Change anchor innerHTML to More and fontawesome 
 
     this.innerHTML = 'More<i class="fa fa-caret-down" aria-hidden="true"></i>'; 
 
    } 
 
    }); 
 
});

#linksList li.more-vs { 
 
    display: none; 
 
} 
 

 
#linksList.expanded li { 
 
    display: list-item; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<ul id="linksList"> 
 
    <li><a href="#">One</a></li> 
 
    <li><a href="#">Two</a></li> 
 
    <li><a href="#">Three</a></li> 
 
    <li><a href="#">Four</a></li> 
 
    <li class="more-vs"><a href="#">Five</a></li> 
 
    <li class="more-vs"><a href="#">Six</a></li> 
 
    <li><a href="#" id="showMore">More<i class="fa fa-caret-down" aria-hidden="true"></i></a></li> 
 
</ul>

あなたは上記のソースコードについてのご質問がある場合は、以下のコメントを残して、私はできるだけ早くあなたに戻って取得しますしてください。

私はこれが幸せなコーディングに役立つことを望みます。