我正在尝试用两个按钮创建一个可滚动的项目列表：向上和向下。我的目标是每当我点击两个按钮中的任何一个时显示单个项目。
我正在使用jQuery事件slideUp()，但每当我点击按钮时，所有列表项都会向上滑动。我无法将每个项目的事件分开。帮助
$(document).ready(function(){
$(".bott").click( function() {
$(".item").slideUp();
});
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TEST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/menuscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"> Home </li>
<li class="nav-item"> About </li>
<li class="nav-item"> Services </li>
<li class="nav-item"> Contact </li>
</ul>
</div>
<div class="col-sm-3">
<div class="menu-wrapper">
<div class="scroll-bottom">
<button type="button" class="bott btn-block">DOWN</button>
</div>
<div class="scroll-top">
<button type="button" class="bott2 btn-block" >UP</button>
</div>
<ul class="menu">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<li class="item">H</li>
<li class="item">I</li>
<li class="item">J</li>
</ul>
</div>
<div class="paddles">
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
$(document).ready(function(){
var i = 0;
$(".bott").click( function() {
$(".item:eq("+i+")").slideUp();
i++;
});
$(".bott2").click( function() {
i--;
$(".item:eq("+i+")").slideDown();
});
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TEST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/menuscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"> Home </li>
<li class="nav-item"> About </li>
<li class="nav-item"> Services </li>
<li class="nav-item"> Contact </li>
</ul>
</div>
<div class="col-sm-3">
<div class="menu-wrapper">
<div class="scroll-bottom">
<button type="button" class="bott btn-block">DOWN</button>
</div>
<div class="scroll-top">
<button type="button" class="bott2 btn-block" >UP</button>
</div>
<ul class="menu">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<li class="item">H</li>
<li class="item">I</li>
<li class="item">J</li>
</ul>
</div>
<div class="paddles">
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
维护计数器以跟踪您向上或向下滑动的项目。检查以下示例并对sideDown()（sliceDown（）上的counter--）执行相同的操作。
$(document).ready(function(){
var counter = 1;
$(".bott").click( function() {
$(".item:nth-child(" + counter + ")").slideUp();
counter++;
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TEST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/menuscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"> Home </li>
<li class="nav-item"> About </li>
<li class="nav-item"> Services </li>
<li class="nav-item"> Contact </li>
</ul>
</div>
<div class="col-sm-3">
<div class="menu-wrapper">
<div class="scroll-bottom">
<button type="button" class="bott btn-block">DOWN</button>
</div>
<div class="scroll-top">
<button type="button" class="bott2 btn-block" >UP</button>
</div>
<ul class="menu">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<li class="item">H</li>
<li class="item">I</li>
<li class="item">J</li>
</ul>
</div>
<div class="paddles">
</div>
</div>
</body>
</html>