基于切换的隐藏元素 - 棘轮答案

【问题标题】：Hiding Element Based on Toggle - Ratchet基于切换的隐藏元素 - 棘轮
【发布时间】：2016-08-03 23:19:30
【问题描述】：

我是使用棘轮框架的新手，所以我可能缺少一些基本的东西。我想在切换关闭时使用切换来隐藏 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();
    }

【问题讨论】：

标签： javascript html css ratchet-2

【解决方案1】：

您应该使用句柄来显示/隐藏您的元素。

访问此链接http://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>

【讨论】：

谢谢，这适用于我想要使用它的用途，但是由于我使用的是点击而不是实际的切换，我将如何重新显示我使用切换隐藏的内容?
我编辑了上面的答案。检查。在任何你想要的地方使用 onclick="show()"。
是的，我知道了。我只是想对两者使用相同的切换，所以第一次点击是隐藏，第二次是显示。所以用户可以来回交换，这可能使用这种技术吗？再次感谢您抽出宝贵时间回答我的问题
太棒了！非常感谢，我真的很感激