RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1084944
Accepted
slobodianiukvitali
slobodianiukvitali
Asked:2020-02-20 03:16:00 +0000 UTC2020-02-20 03:16:00 +0000 UTC 2020-02-20 03:16:00 +0000 UTC

显示更多按钮

  • 772

有 100 个带有块的元素。
有必要在页面上显示前 10 个块。
当您再次单击该按钮时,显示接下来的 10 个块。

var box = document.querySelectorAll('.box');
var btn = document.getElementsByTagName('button');
console.log(box);

btn = addEventListener("click", function() {
  box.slice(0, 9);

})
.wrapper-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 3px;
}

button {
  width: 100%;
  line-height: 40px;
  background-color: orange;
  border: 4px solid #fff;
  color: #fff;
}
<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<button>Show 10</button>

https://codepen.io/vitalikdark/pen/vYOXNvW

javascript
  • 5 5 个回答
  • 10 Views

5 个回答

  • Voted
  1. Denis640Kb
    2020-02-20T05:12:03Z2020-02-20T05:12:03Z

    我看过codepen。
    那只是您的尝试以box.slice(0,9)
    This 结尾,然后您至少添加了一些东西。
    由于 Grundy 训斥了我,我们将在后面讨论,我决定添加一个答案。

        window.onload = function () {
            var box=document.getElementsByClassName('box');
            var btn=document.getElementById('button');
            for (let i=10;i<box.length;i++) {
                box[i].style.display = "none";
            }
    
            var countD = 10;
            btn.addEventListener("click", function() {
                var box=document.getElementsByClassName('box');
                countD += 10;
                if (countD <= box.length){
                    for(let i=0;i<countD;i++){
                        box[i].style.display = "block";
                    }
                }
    
            })
        }
        body {
            background: blue;
        }
        .wrapper-boxes {
            display: flex;
            text-align: center;
            flex-direction: row;
            flex-wrap: wrap;
            width: 79%;
        }
        .box {
            margin: 5px;
            width: 100px;
            height: 100px;
            background-color: orange;
            border-radius: 3px;
        }
        button {
            width: 78%;
            line-height: 40px;
            background-color: orange;
            border: 4px solid #fff;
            color: #fff;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }
    <div class="wrapper-boxes">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <button id="button">Show 10</button>

    • 11
  2. Sevastopol'
    2020-02-20T06:29:08Z2020-02-20T06:29:08Z

    这是一个很好的解决方案。在脚本中,您可以指定要显示的元素数量。当所有元素都已显示时,按钮将被隐藏。例子:

    JavaScript (jQuery) 中的解决方案。100 项

    $(document).ready(function() {
      var list = $(".wrapper-boxes .box");
      var numToShow = 10; //сколько показывать элементов
      var button = $("button");
      var numInList = list.length;
      list.hide();
      if (numInList > numToShow) {
        button.show();
      }
      list.slice(0, numToShow).show();
      button.click(function() {
        var showing = list.filter(':visible').length;
        list.slice(showing - 1, showing + numToShow).fadeIn();
        var nowShowing = list.filter(':visible').length;
        if (nowShowing >= numInList) {
          button.hide();
        }
      });
    });
    .wrapper-boxes {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      counter-reset: albumList;
    }
    
    .box {
      position: relative;
      margin: 5px;
      width: 100px;
      height: 100px;
      background-color: orange;
      border-radius: 3px;
    }
    
    button {
      width: 550px;
      line-height: 40px;
      background-color: orange;
      border: 4px solid #fff;
      color: #fff;
    }
    
    .box:after {
      counter-increment: albumList;
      content: counter(albumList);
      position: absolute;
      top: 10%;
      left: 10%;
      padding: 4% 7%;
      border-radius: 5%;
      border: 1px solid lightgray;
      text-align: center;
      background-color: white;
      font-size: 2vw;
      font-weight: bold;
      font-family: monospace;
      box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="wrapper-boxes">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <button>Показать ещё 10</button>

    其他元素数量(不是十的倍数)

    $(document).ready(function() {
      var list = $(".wrapper-boxes .box");
      var numToShow = 10; //сколько показывать элементов
      var button = $("button");
      var numInList = list.length;
      list.hide();
      if (numInList > numToShow) {
        button.show();
      }
      list.slice(0, numToShow).show();
      button.click(function() {
        var showing = list.filter(':visible').length;
        list.slice(showing - 1, showing + numToShow).fadeIn();
        var nowShowing = list.filter(':visible').length;
        if (nowShowing >= numInList) {
          button.hide();
        }
      });
    });
    .wrapper-boxes {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      counter-reset: albumList;
    }
    
    .box {
      position: relative;
      margin: 5px;
      width: 100px;
      height: 100px;
      background-color: orange;
      border-radius: 3px;
    }
    
    button {
      width: 550px;
      line-height: 40px;
      background-color: orange;
      border: 4px solid #fff;
      color: #fff;
    }
    
    .box:after {
      counter-increment: albumList;
      content: counter(albumList);
      position: absolute;
      top: 10%;
      left: 10%;
      padding: 4% 7%;
      border-radius: 5%;
      border: 1px solid lightgray;
      text-align: center;
      background-color: white;
      font-size: 2vw;
      font-weight: bold;
      font-family: monospace;
      box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="wrapper-boxes">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <button>Показать ещё 10</button>

    本机 JavaScript 中的解决方案

    document.addEventListener("DOMContentLoaded", function() {
      const limit = 10;
      const nextOpen = (wrapper, button) => {
        const boxs = wrapper.querySelectorAll(".box"),
          len = boxs.length - 2,
          endBox = wrapper.querySelector(".nextstop"),
          index = [...boxs].indexOf(endBox) + limit;
        if (endBox) endBox.classList.remove("nextstop");
        if (index < len) boxs[index].classList.add("nextstop");
        else button.remove()
      }
      document.querySelectorAll(".wrapper-boxes").forEach(wrapper => {
        const button = wrapper.nextElementSibling;
        button.addEventListener("click", nextOpen.bind(null, wrapper, button));
        nextOpen(wrapper, button);
      })
    });
    .wrapper-boxes {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      counter-reset: albumList;
    }
    
    .box {
      position: relative;
      margin: 5px;
      width: 100px;
      height: 100px;
      background-color: orange;
      border-radius: 3px;
    }
    
    button {
      width: 550px;
      line-height: 40px;
      background-color: orange;
      border: 4px solid #fff;
      color: #fff;
    }
    
    .box:after {
      counter-increment: albumList;
      content: counter(albumList);
      position: absolute;
      top: 10%;
      left: 10%;
      padding: 4% 7%;
      border-radius: 5%;
      border: 1px solid lightgray;
      text-align: center;
      background-color: white;
      font-size: 2vw;
      font-weight: bold;
      font-family: monospace;
      box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
    }
    
    .box.nextstop~.box {
      display: none;
    }
    <div class="wrapper-boxes">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <button>Показать ещё 10</button>

    • 7
  3. Best Answer
    OPTIMUS PRIME
    2020-02-20T07:28:41Z2020-02-20T07:28:41Z

    Всем блокам дать класс-невидимку, при каждом клике собрать все элементы с этим классом и с первых N элементов убрать невидимку, дать другой класс со стилями:

    var more = document.querySelectorAll('.more');
    
    for (var i = 0; i < more.length; i++) {
      more[i].addEventListener('click', function() {
        var showPerClick = 3;
        
        var hidden = this.parentNode.querySelectorAll('div.hidden');
        for (var i = 0; i < showPerClick; i++) {
          if (!hidden[i]) return this.outerHTML = "";
    
          hidden[i].classList.add('box');
          hidden[i].classList.remove('hidden');
        }
      });
    }
    .wrapper-boxes {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    
    .box {
      margin: 1px;
      width: 20px;
      height: 20px;
      background-color: orange;
    }
    
    .hidden {
      display: none;
    }
    <div>
      <!-- какой-нибудь общий родитель для кнопки и блоков -->
      <button class="more">Show 3</button>
      <hr>
      <div class="wrapper-boxes">
        <div class="hidden"></div><div class="hidden"></div><div class="hidden"></div>
        <div class="hidden"></div><div class="hidden"></div><div class="hidden"></div>
        <div class="hidden"></div><div class="hidden"></div><div class="hidden"></div>
        <div class="hidden"></div><div class="hidden"></div><div class="hidden"></div>
        <div class="hidden"></div><div class="hidden"></div><div class="hidden"></div>
        <div class="hidden"></div>
      </div>
    </div>

    • 7
  4. USERNAME GOES HERE
    2020-04-15T19:09:46Z2020-04-15T19:09:46Z
    • codepen 1

      jQuery(document).ready(function($){
        $(".show-more-btn").click(function(e){
          $(".show-more-item:hidden").slice(0,3).fadeIn();
          if ($(".show-more-item:hidden").length < 1) $(this).fadeOut();
        })
      })
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div class="show-more-item">blah</div>
      <div class="show-more-item">blah</div>
      <div class="show-more-item">blah</div>
      <div class="show-more-item">blah</div>
      <div class="show-more-item" style="display: none;">blah</div>
      <div class="show-more-item" style="display: none;">blah</div>
      <div class="show-more-item" style="display: none;">blah</div>
      <div class="show-more-item" style="display: none;">blah</div>
      <div class="show-more-item" style="display: none;">blah</div>
      <div class="show-more-item" style="display: none;">blah</div>
      <div class="show-more-item" style="display: none;">blah</div>
      <div class="show-more-item" style="display: none;">blah</div>
      <div class="show-more-item" style="display: none;">blah</div>
      <div class="show-more-btn">Load More</div>

    • codepen 2

      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      
      body {
        background: #e9ecef;
      }
      
      h3 {
        background: #1C1D1F;
        color: white;
        width: 80%;
        text-align: center;
        margin: 15px auto;
        padding: 10px;
      }
      
      ul {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        list-style-type: none;
        background: white;
      }
      
      li {
        height: 50px;
        line-height: 50px;
        border-top: 1px solid #e9ecef;
      }
      
      ul a {
        display: block;
        height: 100%;
        text-decoration: none;
        color: black;
        padding-left: 10px;
        position: relative;
        transition: background .3s;
      }
      
      ul a:after {
        content: '⇢';
        position: absolute;
        right: 10px;
      }
      
      ul a:hover {
        background: #cdcbc4;
      }
      /* CHECKBOX CONTAINER STYLES
      –––––––––––––––––––––––––––––––––––––––––––––––––– */
      
      .container {
        position: relative;
        height: auto;
        border-top: 0;
      }
      
      [type="checkbox"] {
        position: absolute;
        left: -9999px;
      }
      
      label {
        background: #e4e3df;
        display: block;
        width: 100%;
        height: 50px;
        cursor: pointer;
        position: absolute;
        top: 0;
        transition: top .45s cubic-bezier(.44, .99, .48, 1);
      }
      /*
       * use the rule below for testing purposes
       * label:hover {
       *    background: yellow;
       *  }
       */
      
      label:before,
      label:after {
        position: absolute;
      }
      
      label:before {
        content: 'More';
        left: 10px;
      }
      
      label:after {
        content: '⇣●';
        right: 10px;
        -webkit-animation: sudo .85s linear infinite alternate;
        animation: sudo .85s linear infinite alternate;
      }
      
      @keyframes sudo {
        from {
          -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
        }
        to {
          -webkit-transform: translateY(2px);
          transform: translateY(2px);
        }
      }
      
      input[type="checkbox"] ~ ul {
        width: 100%;
        overflow: hidden;
        max-height: 0;
        transition: max-height .45s cubic-bezier(.44, .99, .48, 1);
      }
      /* CHECKED STATE STYLES
      –––––––––––––––––––––––––––––––––––––––––––––––––– */
      
      [type="checkbox"]:checked ~ ul {
        /**
         * the value of the `max-height` property specifies the transition speed
         * set a very big value (e.g. 9999px) to see the difference
         */
        
        max-height: 300px;
      }
      
      [type="checkbox"]:checked + label {
        top: 100%;
      }
      
      [type="checkbox"]:checked + label:before {
        content: 'Less';
      }
      
      [type="checkbox"]:checked + label:after {
        content: '⇡●';
      }
      
      ul li:last-child {
        margin-bottom: 50px;
      }
      <h3>Pure CSS "Show More/Less" functionality with Transitions<br>(slideToggle effect with no JavaScript).</h3>
      
      <ul>
        <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="container">
          <input type="checkbox" id="check_id">
          <label for="check_id"></label>
          <ul>
            <li><a href="#">Five</a></li>
            <li><a href="#">Six</a></li>
            <li><a href="#">Seven</a></li>
            <li><a href="#">Eight</a></li>
            <li><a href="#">Nine</a></li>
            <li><a href="#">Ten</a></li>
          </ul>
        </li>
      </ul>

    • 2
  5. ws17
    2022-09-10T11:38:07Z2022-09-10T11:38:07Z

    Кого интересует более проработанная версия, в адаптивных блоках в ряд 3 блока, плюс кнопка показать еще блоки с фото, показываем 6 блоков, но если надо подгрузить еще 6, нажимаем кнопку показать еще, если все фото загружены, кнопка исчезает. Код подгрузить еще блоки, позаимствовал у автора выше.

    Для фото до и после, используется скрипт twentytwenty.

    Таким способом можно показывать работы, до и после, ну и для другого применить.

     //подгрузить еще по кнопке, если все элемнты подгружены, скрывает кнопку
     $(window).on('load', function() {
        initTwenty();
      });
    
      // Фото, до и после
      function initTwenty() {
        $(".twentytwenty").twentytwenty({
          no_overlay: false, // Не показывать наложение было, стало, true скрыть
          // Перемещать ползунок при наведении курсора мыши
          move_slider_on_hover: false, 
          // Разрешить пользователю проводить пальцем в любом месте
          // изображения для управления движением ползунка.
          move_with_handle_only: true, 
          before_label: 'До',
          after_label: 'После'
        });
      }
    
      $(document).ready(function() {
        var list = $(".gggggggg .twentytwenty");
        var numToShow = 6; //сколько показывать элементов
        var button = $("button");
        var numInList = list.length;
        list.hide();
        if (numInList > numToShow) {
          button.show();
        }
        list.slice(0, numToShow).show();
        button.click(function() {
          var showing = list.filter(':visible').length;
          list.slice(showing - 1, showing + numToShow).fadeIn();
          var nowShowing = list.filter(':visible').length;
          if (nowShowing >= numInList) {
            button.hide();
          }
          initTwenty();
        });
      });
    .prfota {
      margin: 0 0 -40px -40px;
    }
    .twentytwenty-wrapper{
      -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(33.333333% - 0px);
      flex: 0 0 calc(33.333333% - 0px);
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .twentytwenty-container{
    margin: 0 0 40px 40px;
    }
    
    .gggggggg button {
      width: 280px;
      height: 60px;
      line-height: 60px;
      border: 1px solid #CB002B;
      background: #fff;
      font-weight: 600;
      text-align: center;
      color: #282725;
      text-transform: uppercase;
      border-radius: 90px;
      margin-top: 40px;
    }
    .gggggggg button:hover {
      background: #282725;
      border: 1px solid #282725;
      color: #fff;
    }
    
    .wr {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }
    
    .prfota {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://test.vl-it.ru/media/twentytwenty/css/twentytwenty.css">
     <script src="https://test.vl-it.ru/media/twentytwenty/js/jquery.event.move.js"></script>
     <script src="https://test.vl-it.ru/media/twentytwenty/js/jquery.twentytwenty.js"></script>
     
     <div class="gggggggg">
       <div class="prfota wr prfot">
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
         <div class="twentytwenty">
           <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
           <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
         </div>
       </div>
    
       <button>Показать еще</button>
     </div>

    • 2

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何从列表中打印最大元素(str 类型)的长度?

    • 2 个回答
  • Marko Smith

    如何在 PyQT5 中清除 QFrame 的内容

    • 1 个回答
  • Marko Smith

    如何将具有特定字符的字符串拆分为两个不同的列表?

    • 2 个回答
  • Marko Smith

    导航栏活动元素

    • 1 个回答
  • Marko Smith

    是否可以将文本放入数组中?[关闭]

    • 1 个回答
  • Marko Smith

    如何一次用多个分隔符拆分字符串?

    • 1 个回答
  • Marko Smith

    如何通过 ClassPath 创建 InputStream?

    • 2 个回答
  • Marko Smith

    在一个查询中连接多个表

    • 1 个回答
  • Marko Smith

    对列表列表中的所有值求和

    • 3 个回答
  • Marko Smith

    如何对齐 string.Format 中的列?

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5