Bootstrap—点击按钮控制div隐藏和显示的切换（图文详情）

Bootstrap—点击按钮控制div隐藏和显示的切换

第一步：bootstrap有一个open类用来控制隐藏和显示，动态获取open是true还是false，并且点击按钮让toggle的true和false来回切换

 <li class="dropdown" :class="{open: toggle}">// open动态获取toggle到底是true还是false<a href="#" @click="toggle=!toggle">// 让true和false来回切换<span  class="glyphicon glyphicon-user"></span>{{username}}</a><ul class="dropdown-menu"><li @click="loginout"><a href="#">退出</a></li></ul></li>

第二步：让toggle等于false，让下面的退出按钮隐藏起来

    data () {return {toggle: false,// 刚开始让open是false，隐藏退出这个div}},

刚开始是false，所以退出这个div是隐藏的，
点击之后是true，所以显示退出
再次点击又是false，所以又隐藏。。。。

Bootstrap—点击按钮控制div隐藏和显示的切换（图文详情）相关推荐

点击按钮控制div隐藏和显示
要求:有一个按钮,点击按钮使得div消失,之后将按钮文字改变为显示,再次点击按钮使得div出现,依次类推.效果如下图方法一引入vue <html><head>< ...
微信小程序通过点击按钮控制元素隐藏与显示
目录一.效果图: 二.代码 js: wxml: 一.效果图: 二.代码 js: Page({data:{hidden:false, }, // 隐藏yincang:function(e){setTi ...
html点击展开盒子变大,JS实现点击按钮控制Div变宽、增高及调整背景色的方法
本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div ...
AngularJS控制div隐藏或显示-ng-show
2019独角兽企业重金招聘Python工程师标准>>> 效果图 NgShow.html <!doctype html> <html ng-app="MyC ...
原生js设置div隐藏或者显示_JavaScript动画方式控制div元素的隐藏和显示
jQuery实现此功能相对比较简单,具体参阅点击按钮动画方式隐藏和显示div一章节. 结合CSS3实现此功能也非常便利和适合,具体参阅JavaScript与CSS3动画方式改变元素尺寸一章节. 原生J ...
原生js设置div隐藏或者显示_10种JS控制DIV的显示隐藏代码
div隐藏与显示 #menus { background-color: #c4cff0; } function Layer_HideOrShow(cur_div) { var current=docu ...
原生js设置div隐藏或者显示_JS实现“隐藏与显示”功能(多种方法)
下面我将效果图展示出来: 1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: 通过按钮实现隐藏和显示 .body{ margin: 0 auto; } #show{ wi ...
html动态显示隐藏div,div隐藏与显示属性怎么让一个div显示一个div隐藏
怎么让一个div显示一个div隐藏总是显示 js控制div显示与隐藏,js利用"hover"属性 1.首先样式要设定好,在每个li区域只能显示a或者b. 2.引入js库代码(jq ...
jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果隐藏.显示.切换.滑动.淡入淡出.以及动画1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示toggle()方法:可以使用它来切换hide ...

Bootstrap—点击按钮控制div隐藏和显示的切换（图文详情）

Bootstrap—点击按钮控制div隐藏和显示的切换

Bootstrap—点击按钮控制div隐藏和显示的切换（图文详情）相关推荐

最新文章

热门文章