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>

腓

<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

您可以使用相同的锚元素和函数来处理hide / show。

我还清理了一些现有的源代码，如果你只是想在特定的锚标记中采取行动，我无法理解为什么会为整个文档设置事件监听器click的原因点击。

我在源代码中放置了注释来解释每一行。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您对上述源代码有任何疑问，请在下面留言，我会尽快给您回复。

我希望这有帮助，快乐编码！

将shrink添加到数组值内容

1 个答案: