JQuery

引用 JQuery 文件满足功能实现;

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

HTML

创建页面实现内容;
<div class="showMyLove">…</div> 为控制的对象 div 层,可个单个,也可以是多个,通过 toggle() 实现同时响应事件,非常方便应用在遍历数据后返回的多个条目结果的显示控制;
class="showMyLove" 对应 JS 文件的 toggle() 开关;
myFunction() 激活按钮事件;

<div class="showMyLove">enjoyJQuery</div>
<div class="showMyLove">enjoyJQuery</div>
<div class="showMyLove">enjoyJQuery</div>
<div class="showMyLove">enjoyJQuery</div>
<div class="showMyLove">enjoyJQuery</div>

<button onclick="myFunction()">show</button>

CSS

将主体内容配置为预先样式,如果默认显示,将无需先行设置,如下为预先将内容隐藏;

.showMyLove{
    display: none;
}

JS

创建功能实现事件脚本路径。

function myFunction(){
    $('.showMyLove').toggle();
}

0 条评论

发表评论

Avatar placeholder

您的电子邮箱地址不会被公开。