当我到达开幕式时＆lt; div1＆gt;部分，向下箭头键不让我去下一个＆lt; div2＆gt;部分，除非按钮在＆lt; div1＆gt;部分被按下，我有4＆lt; div>复制这种效果的部分。这没问题。
我的问题是例如：当我到达＆lt; div2＆gt;部分，当我按向上箭头键并转到＆lt; div1＆gt;部分，然后按向下箭头键，它不会让我下去＆lt; div2＆gt;部分，因为我的计划是按下＆lt;中的按钮。 div1＆gt;部分，它应解除对箭头键应用的任何限制＆lt; div1＆gt;部分。我计划复制这个用于所有其他3＆lt; div>部分。
我正在使用JQuery和一个名为PagePiling的Parallax Scrolling Plugin，我相信我的问题与PagePiling没有特别的关系，即使PagePiling使用＆lt; div>用于创建这些视差滚动效果的部分。
如果你运行我的代码，我写了我的问题是代码之间＆lt; p>和＆lt; / p＆gt;。问题应该在于setup（）方法。无论如何，我会让你尝试它，你会明白我的意思。
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/pagePiling.js/master/jquery.pagepiling.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
/* Plugin intialization */
$('#example').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['white', '#ee005a', 'white', '#39C'],
navigation: {
'position': 'right',
'tooltips': ['page1', 'page2', 'page3', 'page4']
},
afterRender: function () {
$('#pp-nav').addClass('custom');
},
afterLoad: function (anchorLink, index) {
if (index > 1) {
$('#pp-nav').removeClass('custom');
} else {
$('#pp-nav').addClass('custom');
}
}
});
$("#f1").submit(function (e) {
e.preventDefault();
});
$("#f2").submit(function (e) {
e.preventDefault();
});
$("#f3").submit(function (e) {
e.preventDefault();
});
url = window.location;
var PP = $.fn.pagepiling;
function setup() {
$(document).keydown(function (e) {
var activeSection = $('.pp-section.active').index('.pp-section');
var keyCode = (window.event) ? e.which : e.keyCode;
if (keyCode == 40 && activeSection == 1) {
PP.moveTo('page1');
}
if (keyCode == 39 && activeSection == 1) {
PP.moveTo('page1');
}
if (keyCode == 40 && activeSection == 2) {
PP.moveTo('page2');
}
if (keyCode == 39 && activeSection == 2) {
PP.moveTo('page2');
}
if (keyCode == 40 && activeSection == 3) {
PP.moveTo('page3');
}
if (keyCode == 39 && activeSection == 3) {
PP.moveTo('page3');
}
});
}
setup();
});
</script>
<style>
/* Custom CSS
* --------------------------------------- */
body,div,ul,li,h1,form,button,p {
font-weight: normal;
font-size: 100%;
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
pading: 0;
}
h1 {
font-size: 4em;
}
.section {
text-align: center;
}
/* Menu
* --------------------------------------- */
#menu li {
display:inline-block;
margin: 10px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}
#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}
/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
#pp-nav.custom .pp-tooltip{
color: #AAA;
}
#markup{
display: block;
width: 450px;
margin: 20px auto;
text-align: left;
}
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">Page1</a></li>
<li data-menuanchor="page2"><a href="#page2">Page2</a></li>
<li data-menuanchor="page3"><a href="#page3">Page3</a></li>
<li data-menuanchor="page4"><a href="#page4">Page4</a></li>
</ul>
<div id="example">
<div class="section" id="section1">
<h1>Page 1</h1>
<p>Initially, the down arrow key will stop you from proceeding to Page 2, unless you press the button. <br><br></p>
<button id="f1" onclick="return s2()">Click me to proceed</button>
<p><br>However if you are on Page 2, when you return to Page 1, the down arrow key still stops you from proceeding to Page 2. <br>Here is where my problem is, it shouldn't be preventing you from going to Page 2</p>
<p><br>(I know you can scroll downwards as well as use the navigation button at the top and on your right side <br>but for the purposes here, I only need to solve this)</p>
</div>
<div class="section" id="section2">
<h1>Page 2</h1>
<p>Initially, the down arrow key will stop you from proceeding to Page 3, unless you press the button. <br><br></p>
<button id="f2" onclick="return s3()">Click me to proceed</button>
<p><br>However if you are on Page 3, when you return to Page 2, the down arrow key still stops you from proceeding to Page 3. <br>Here is where my problem is, it shouldn't be preventing you from going to Page 3</p>
<p><br>(I know you can scroll downwards as well as use the navigation button at the top and on your right side <br>but for the purposes here, I only need to solve this)</p>
</div>
<div class="section" id="section3">
<h1>Page 3</h1>
<p>Initially, the down arrow key will stop you from proceeding to Page 4, unless you press the button. <br><br></p>
<button id="f3" onclick="return s4()">Click me to proceed</button>
<p><br>However if you are on Page 4, when you return to Page 3, the down arrow key still stops you from proceeding to Page 4. <br>Here is where my problem is, it shouldn't be preventing you from going to Page 4</p>
<p><br>(I know you can scroll downwards as well as use the navigation button at the top and on your right side <br>but for the purposes here, I only need to solve this)</p>
</div>
<div class="section" id="section4">
<h1>Page 4</h1>
<p><br>Here, the down arrow key should not prevent you stopping anywhere</p>
</div>
</div>
<script>
var PP = $.fn.pagepiling;
function s2() {
PP.moveSectionDown();
}
function s3() {
PP.moveSectionDown();
}
function s4() {
PP.moveSectionDown();
}
</script>
</body>
</html>
谢谢，感谢您的帮助。
这是我的代码的运行演示（向Himesh喊出来提出这个建议添加它）