Question

我正在尝试通过单击顶部和向下箭头滚动ul列表。在Scroll期间，它应该只显示一个li元素并隐藏其余元素。请，任何人都可以帮我实现这一点。代码检查代码笔链接

<div class="ok-top" id="up"></div>
<div id="list">
<ul class="innerbox">
<li>2001</li>
<li>2002</li>
</ul>
<div class="ok-bottom" id="down"></div>
<div class="boxlines"></div>

完整代码请查看代码笔链接

Code pen link

Answer 1

var listcount = $('li').size();
var cli = 1;
$('#down').click(function() {
  if (cli < listcount) {
    $('li:nth-child(' + cli + ')').slideToggle();
    cli++;
  }
});
$('#up').click(function() {
  if (cli > 1) {
    cli--;
    $('li:nth-child(' + cli + ')').slideToggle();
  }
});

.box {
  height: 200px;
  width: 150px;
  border: 1px solid lightgrey;
}
.boxlines {
  width: 60px;
  left: 46px;
  height: 35px;
  border-top: 2px solid #31b6e7;
  border-bottom: 2px solid #31b6e7;
  margin-top: -11px;
  display: block;
  position: absolute;
  top: 96px;
}
.innerbox {
  list-style: none;
}
.ok-top {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  left: 60px;
  position: absolute;
  border-bottom: 15px solid #333;
}
.ok-bottom {
  width: 0;
  height: 0;
  left: 60px;
  bottom: -9px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #333;
  position: relative;
}
div#list {
  overflow: hidden;
  height: 165px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>

  <div class="ok-top" id="up"></div>

  <div id="list">
    <ul class="innerbox">
      <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">Select</li>
      <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2001</li>
      <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2002</li>
      <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2003</li>
      <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2004</li>
      <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2005</li>
      <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2006</li>
      <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2007</li>
      <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2008</li>
      <li style="padding-top:15px;padding-bottom:10px;font-size:24px;">2009</li>
    </ul>
  </div>


  <div class="boxlines"></div>
  <div class="ok-bottom" id="down"></div>

滚动ul列表元素

1 个答案: