Скрытие элемента на основе Toggle - Ratchet

Я новичок в использовании храпового механизма, поэтому, вероятно, я пропустил что-то основное. Я хочу использовать переключатель, чтобы скрыть div, когда переключатель выключен, и отображать его, когда переключатель включен. Я знаю, что имя переключателя переключается на включение активного, когда он активен, но код, который я нашел из нескольких других сообщений, похоже, не работает в моей ситуации. Любая помощь приветствуется.Скрытие элемента на основе Toggle - Ratchet

Благодаря

HTML

<div class="content"> 
    <div id="map"></div> 


    <ul class="table-view"> 
     <li class="table-view-cell"> 
      Stages 
      <div id="toggle1" class="toggle"> 
       <div class="toggle-handle"></div> 
      </div> 
     </li> 
     <li class="table-view-cell"> 
      Washrooms 
      <div class="toggle "> 
       <div class="toggle-handle"></div> 
      </div> 
     </li> 
     <li class="table-view-cell"> 
      Foods 
      <div class="toggle"> 
       <div class="toggle-handle"></div> 
      </div> 
     </li> 
     <li class="table-view-cell"> 
      Security 
      <div class="toggle"> 
       <div class="toggle-handle"></div> 
      </div> 
     </li> 
     <li class="table-view-cell"> 
      First Aid 
      <div class="toggle"> 
       <div class="toggle-handle"></div> 
      </div> 
     </li> 
     <li class="table-view-cell"> 
      ATM 
      <div class="toggle"> 
       <div class="toggle-handle"></div> 
      </div> 
     </li> 
    </ul> 
    <div id="Stage1" class="StageMain"> 
     <a href="#"><img src="img/Untitled-1.png"> 
     </a> 
    </div> 
    <div class="StageSecond"> 
     <a href="#"><img src="img/Untitled-1.png"> 
     </a> 
    </div> 
    <div class="StageThird"> 
     <a href="#"><img src="img/Untitled-1.png"> 
     </a> 
    </div> 

</div>

Javascript

if(document.getElementById("toggle1").className == 'toggle active') 
    { 
     $('#Stage1').show(); 
    } 
    else 
    { 
     $('#Stage1').hide(); 
    }

источник

2016-04-13 Unscrupulous

вы должны использовать ручку, чтобы показать/скрыть элемент.

посетить эту ссылку http://www.w3schools.com/jquery/jquery_hide_show.asp

проверить этот код:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 

 
<script> 
 
var status = 'show'; 
 
function change() 
 
{ 
 
\t if(status == 'show') 
 
\t { 
 
\t \t document.getElementById("toggle1").style.display = 'none'; 
 
\t \t status = 'hide'; 
 
\t } 
 
\t else 
 
\t { 
 
\t \t document.getElementById("toggle1").style.display = 'block'; 
 
\t \t status = 'show'; 
 
\t } 
 
} 
 
</script> 
 
</head> 
 

 
<body> 
 
\t <div class="content"> 
 
    <div id="map"></div> 
 

 
    <ul class="table-view"> 
 
     <li class="table-view-cell" onclick="change()"> 
 
      Stages (click here) 
 
      <div id="toggle1" class="toggle">this is test 
 
       <div class="toggle-handle"></div> 
 
      </div> 
 
     </li> 
 
     <li class="table-view-cell" > 
 
      Washrooms 
 
      <div class="toggle "> 
 
       <div class="toggle-handle"></div> 
 
      </div> 
 
     </li> 
 
     <li class="table-view-cell"> 
 
      Foods 
 
      <div class="toggle"> 
 
       <div class="toggle-handle"></div> 
 
      </div> 
 
     </li> 
 
     <li class="table-view-cell"> 
 
      Security 
 
      <div class="toggle"> 
 
       <div class="toggle-handle"></div> 
 
      </div> 
 
     </li> 
 
     <li class="table-view-cell"> 
 
      First Aid 
 
      <div class="toggle"> 
 
       <div class="toggle-handle"></div> 
 
      </div> 
 
     </li> 
 
     <li class="table-view-cell"> 
 
      ATM 
 
      <div class="toggle"> 
 
       <div class="toggle-handle"></div> 
 
      </div> 
 
     </li> 
 
    </ul> 
 
    <div id="Stage1" class="StageMain"> 
 
     <a href="#"><img src="img/Untitled-1.png"> 
 
     </a> 
 
    </div> 
 
    <div class="StageSecond"> 
 
     <a href="#"><img src="img/Untitled-1.png"> 
 
     </a> 
 
    </div> 
 
    <div class="StageThird"> 
 
     <a href="#"><img src="img/Untitled-1.png"> 
 
     </a> 
 
    </div> 
 

 
</div> 
 
</body> 
 
</html>

источник

2016-04-13 05:11:27 aghilpro

Спасибо, что работает для того, что я хочу, чтобы использовать его для, однако, так как я использую по щелчку а не фактическое переключение, как бы я мог повторить отображение того, что я спрятал, используя переключатель? – Unscrupulous

Я отредактировал выше ответ. Проверь это. use onclick = "show()" где угодно. – aghilpro

Да, у меня есть эта часть. Я просто пытаюсь использовать один и тот же переключатель для обоих, поэтому первый щелчок будет скрытым, а второй - показом. Таким образом, пользователь может переключаться туда и обратно, возможно ли, используя эту технику? Еще раз спасибо за то, что нашли время, чтобы ответить на мои вопросы. – Unscrupulous

Скрытие элемента на основе Toggle - Ratchet

ответ

Смежные вопросы