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

上記の回答を編集しました。それを確認してください。 onclick = "show（）"を使用します。 – aghilpro

ええ、私はその部分を持っています。私は両方のために同じトグルを使用しようとしているので、最初のクリックは非表示になり、2番目の表示は表示されます。ユーザーは前後にスワップすることができますが、この方法を使用すると可能ですか？もう一度、私の質問に答える時間を取ってくれてありがとう – Unscrupulous

Toggle-Ratchetに基づいた隠蔽要素

答えて

関連する問題