基于 Toggle 的隐藏元素 - Ratchet

Question

我是棘轮框架的新手，所以我可能缺少一些基本的东西。我想使用开关在开关关闭时隐藏 div，并在开关打开时显示它。我知道当切换名称处于活动状态时会更改为切换活动状态，但我从其他一些帖子中找到的代码在我的情况下似乎不起作用。任何帮助表示赞赏。

谢谢

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

Answer 1

您应该使用 show/hide 您的元素的句柄。

访问这个linkhttp://www.w3schools.com/jquery/jquery_hide_show.asp

检查此代码：

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

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

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

基于 Toggle 的隐藏元素 - Ratchet

Hiding Element Based on Toggle - Ratchet

html

javascript

css

ratchet-2