Question

我试图进行在线考试，但我想不显示第一个div就单击它，当我单击第二个按钮时，第一个div关闭，然后又打开了两个div，依此类推

现在此代码可以正常工作，但是您需要手动打开和关闭它，并且可以同时将其全部打开，这将与其他div冲突

PS：我在这里检查了一些类似的问题，但是没有显示出我想要的结果

$(document).ready(function(){
  $(".slidingDiv").hide();
  $('.toggle-next-div').click(function(){
      $(this).next().slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-next-div">1</button>
<div class="slidingDiv">
    <p>test1</p>
</div>
<button class="toggle-next-div">2</button>
<div class="slidingDiv">
    <p>test2</p>
</div>
<button class="toggle-next-div">3</button>
<div class="slidingDiv">
    <p>test3</p>
</div>
<button class="toggle-next-div">4</button>
<div class="slidingDiv">
    <p>test4</p>
</div>
<button class="toggle-next-div">5</button>
<div class="slidingDiv">
    <p>test5</p>
</div>

Answer 1

要不隐藏第一个元素，您需要:not，而要隐藏除此元素之外的所有元素，您都需要.siblings('.slidingDiv')

$(document).ready(function() {
  $(".slidingDiv:not(:first)").hide();
  $('.toggle-next-div').click(function() {
    $(this).next().siblings('.slidingDiv').hide();
    $(this).next().slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-next-div">1</button>
<div class="slidingDiv">
  <p>test1</p>
</div>
<button class="toggle-next-div">2</button>
<div class="slidingDiv">
  <p>test2</p>
</div>
<button class="toggle-next-div">3</button>
<div class="slidingDiv">
  <p>test3</p>
</div>
<button class="toggle-next-div">4</button>
<div class="slidingDiv">
  <p>test4</p>
</div>
<button class="toggle-next-div">5</button>
<div class="slidingDiv">
  <p>test5</p>
</div>

编辑：

$(document).ready(function() {
  $(".slidingDiv:not(:first)").hide();
  $('.toggle-next-div').click(function(e) {
    if($(this).next('.slidingDiv').is(":visible")){
      e.preventDefault();
      return;
    }
    $(this).next().siblings('.slidingDiv').hide();
    $(this).next().slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-next-div">1</button>
<div class="slidingDiv">
  <p>test1</p>
</div>
<button class="toggle-next-div">2</button>
<div class="slidingDiv">
  <p>test2</p>
</div>
<button class="toggle-next-div">3</button>
<div class="slidingDiv">
  <p>test3</p>
</div>
<button class="toggle-next-div">4</button>
<div class="slidingDiv">
  <p>test4</p>
</div>
<button class="toggle-next-div">5</button>
<div class="slidingDiv">
  <p>test5</p>
</div>

Answer 2

首先，您应该隐藏所有.slidingDiv，但首先可以使用:gt()来完成这项工作。然后在click事件处理程序上，显示clicked元素并隐藏其同级。

您的代码应更改为

$(document).ready(function(){
  $(".slidingDiv:gt(0)").hide();
  $('.toggle-next-div').click(function(){
    $(this).next().slideToggle();
    $(this).next().siblings(".slidingDiv").slideUp();   
  });
});

您还可以简化代码并使用jquery链接

$('.toggle-next-div').click(function(){
  $(this).next().slideToggle().siblings(".slidingDiv").slideUp();   
}).next(".slidingDiv:gt(0)").hide();

$('.toggle-next-div').click(function(){
  $(this).next().slideToggle().siblings(".slidingDiv").slideUp();	
}).next(".slidingDiv:gt(0)").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-next-div">1</button>
<div class="slidingDiv">
  <p>test1</p>
</div>
<button class="toggle-next-div">2</button>
<div class="slidingDiv">
  <p>test2</p>
</div>
<button class="toggle-next-div">3</button>
<div class="slidingDiv">
  <p>test3</p>
</div>
<button class="toggle-next-div">4</button>
<div class="slidingDiv">
  <p>test4</p>
</div>
<button class="toggle-next-div">5</button>
<div class="slidingDiv">
  <p>test5</p>
</div>

Answer 3

您需要为页面实现状态。

例如，当您的页面处于状态f = open("guru99.txt", "w+")时，第一个div是打开的，而其他则是关闭的；如果页面处于状态1，则第二个div是打开的，而其他的div是关闭的，等等。

现在想到的最简单的方法是：

JavaScript：

HTML：

let state = 1
function changeState(newState){
    state = newState
    updateDivs()
}
function updateDivs(){
    let divs = $(".slidingDiv")
    for(let divIndex in divs){
        if(divIndex == state) divs[divIndex].show()
        else divs[divIndex].hide()
    }
}

document.onload = function(){
    updateDivs()
}

Answer 4

我对HTML进行了一些修改，只将单个next按钮而不是每个div的next按钮放置了。现在，第一个div将在页面加载时显示，但是在每次单击“下一步”按钮时，显示的div将被隐藏，其下一个div将显示为此类，

HTML：

testng.xml

JS：

<div class="slidingDiv">
 <p>test1</p>
</div>
<div class="slidingDiv">
 <p>test2</p>
</div>
<div class="slidingDiv">
 <p>test3</p>
</div>
<div class="slidingDiv">
  <p>test4</p>
</div>
<div class="slidingDiv">
 <p>test5</p>
</div>
<button class="next-btn">Next</button>

HTML-div显示并在下次单击时隐藏

4 个答案: