基于切换棘轮的隐藏元素

Hiding Element Based on Toggle - Ratchet

本文关键字：隐藏 元素 于切换      更新时间：2024-05-20

我是棘轮框架的新手，所以我可能缺少一些基本的东西。我想在toggle关闭时使用toggle来隐藏div，并在toggleon打开时显示它。我知道toggle名称在它处于活动状态时会更改为toggle-active，但我从其他几篇文章中找到的代码似乎在我的情况下不起作用。感谢您的帮助。

感谢

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

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

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

相关文章：