微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用带有字形图标的 Bootstrap Accordion:需要将默认状态更改为要展开的部分 “折叠”不起作用

如何解决使用带有字形图标的 Bootstrap Accordion:需要将默认状态更改为要展开的部分 “折叠”不起作用

我试图在单击时展开/折叠包含图像的部分,并且我希望该部分的标题具有 +/- 字形。最后但并非最不重要的一点是,我需要控制认状态是折叠还是扩展(我会通过将变量传递给 html 来做到这一点)。

我自己制作了以下代码,但是当我将此代码插入到我的 django 项目中时 - 该部分根本不会折叠,而字形会按照应有的方式更改。 可能有什么问题? (我认为要在认情况下扩展该部分,我需要在课后添加“in”,并为 glyphicon 添加“glyphicon-minus”。)

提前致谢

<!DOCTYPE html>
<html lang="en" >
<head>
  <Meta charset="UTF-8">

  <title>BootStrap Accordion/Collapse with Toggle Icon</title>
  
  
 <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
</head>

<body>
<div class="panel-group" id="accordion">

  <div class="panel panel-default">
    <div class="panel-heading" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" data-target="#collapSEOne" aria-expanded="true" aria-controls="collapSEOne"> 
          
          <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> 
          <!--<body> -->
            <button id='b'>  
              <span class="more-less glyphicon glyphicon-minus"></span>
            </button>
          <!-- </body> -->
          TITLE
        </a>
      </h4>
    </div>
    <div id="collapSEOne" class="panel-collapse collapse in" aria-labelledby="headingOne"      
        <img class="card-img-top img-responsive" src="https://cdn.logo.com/hotlink-ok/logo-social.png">
  </div>
</div>  
</div><!-- container -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> 
<script id="rendered-js" >
/*******************************
* ACCORdioN WITH TOGGLE ICONS
*******************************/
function toggleIcon(e) {
  $(e.target).
  prev('.panel-heading').
  find(".more-less").
  toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse',toggleIcon);
$('.panel-group').on('shown.bs.collapse',toggleIcon);
//# sourceURL=pen.js
    </script>
</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。