JQuery toggle() 控制多个 div 层显示和隐藏

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