HTML-Div Показать и скрыть при следующем нажатии - PullRequest
Новая
       5

HTML-Div Показать и скрыть при следующем нажатии

0 голосов
/ 26 ноября 2018

Я пытаюсь сделать онлайн-экзамен, и я хочу сделать первый показ 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>

Ответы [ 4 ]

0 голосов
/ 26 ноября 2018

Я немного изменил HTML, поместив только одну кнопку «Далее» вместо кнопки «Далее» с каждым элементом Div.Теперь первый div будет отображаться при загрузке страницы, но при каждом нажатии кнопки «Далее» показанный div будет скрыт, а его следующий div будет отображаться следующим образом:

HTML: 

<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>

JS: 

$(document).ready(function () {
    $(".slidingDiv").hide();
    var ref = $(".slidingDiv").first();
    ref.show();
    $('.next-btn').click(function () {
        ref.hide();
        ref = ref.next();
        ref.show();
    });
});
0 голосов
/ 26 ноября 2018

Сначала вы должны скрыть все .slidingDiv, кроме первого, что вы можете использовать :gt() для выполнения этой работы.Затем в обработчике события щелчка отобразите элемент, по которому щелкнули, и скрыте его братьев и сестер.

Ваш код должен быть изменен на 

$(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>
0 голосов
/ 26 ноября 2018

Вам необходимо реализовать состояние для вашей страницы.

Например, когда ваша страница находится в состоянии 1, первый div открыт, а другие закрыты, если в состоянии 2 второй div -open и другие закрыты и т. д.

Самый простой способ реализовать это прямо сейчас - это

JavaScript: 

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()
}

Html: 

<button class="toggle-next-div" onclick="changeState(1)">1</button>
<div class="slidingDiv">
        <p>test1</p>
</div>
<button class="toggle-next-div" onclick="changeState(2)">2</button>
<div class="slidingDiv">
        <p>test2</p>
</div>
<button class="toggle-next-div" onclick="changeState(3)">3</button>
<div class="slidingDiv">
        <p>test3</p>
</div>
<button class="toggle-next-div" onclick="changeState(4)">4</button>
<div class="slidingDiv">
        <p>test4</p>
</div>
<button class="toggle-next-div" onclick="changeState(5)">5</button>
<div class="slidingDiv">
        <p>test5</p>
</div>
0 голосов
/ 26 ноября 2018

Чтобы не скрывать первый элемент, вам нужно :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>
...