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

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

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

基于Toggle - Ratchet的隐藏元素

1 个答案: