我使用一个引导面板,我添加了一个跨度可点击图标:加上当面板主体打开时减去面板主体关闭时,我现在的问题是如何将其设置为默认关闭(加上图标默认显示当我点击它面板体将打开)
在我的代码之上做这件事,在此先感谢您的帮助.
<html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> $(document).on('click','.panel-heading span.clickable',function (e) { var $this = $(this); if (!$this.hasClass('panel-collapsed')) { $this.parents('.panel').find('.panel-body').slideUp(); $this.addClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-minus').addClass('glyphicon-plus'); } else { console.log($this); $this.parents('.panel').find('.panel-body').slideDown(); $this.removeClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-plus').addClass('glyphicon-minus'); } }); </script> <style> .clickable { cursor: pointer; } .clickable .glyphicon { background: rgba(0,0.15); display: inline-block; padding: 6px 12px; border-radius: 4px } .panel-heading span { margin-top: -23px; font-size: 15px; margin-right: -9px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> Panel 1</h3> <span class="pull-right clickable panel-collapsed in"><i class="glyphicon glyphicon-plus"></i></span> </div> <div class="panel-body"> Panel content</div> </div> </div> </div> </div> </body> </html>
解决方法
你只需要改变这个:
<div class="panel-body">
对此:
<div class="panel-body" style="display:none;">
并通过slideDown()更改slideUp(),并通过slideUp()更改slideDown().
也改变这个:
<span class="pull-right clickable collapse in"><i class="glyphicon glyphicon-plus"></i></span>
对此:
<span class="pull-right clickable collapse in"><i class="glyphicon glyphicon-minus"></i></span>
一切都应该像你现在在你的问题中提到的那样工作.
这是一个JSFiddle链接:Try It
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。