javascript - HTML- div 在下次点击时显示和隐藏

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>

标签： javascriptjqueryhtmlslidetoggle

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>