首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >引导切换边栏下拉图标

引导切换边栏下拉图标
EN

Stack Overflow用户
提问于 2013-05-19 22:02:17
回答 1查看 3K关注 0票数 2

在我的网站的侧边栏导航上,我有下拉菜单的工作。但是,我希望图标根据代码所处的状态(已关闭或已打开)在指向右侧<i class="icon-angle-right"></i>和指向下方<i class="icon-angle-down"></i>之间进行更改。

下面是为每个菜单重复执行的代码:

代码语言:javascript
复制
<!-- USER -->
<li class="nav-header">
    <a href="#" data-toggle="collapse" data-target="#userMenu">
    <font color="#333333">User</font> <i class="icon-angle-down"></i>
    </a>
    <ul style="list-style: none;" class="collapse in" id="userMenu">
        <li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
        <li><a href="#"><i class="icon-envelope-alt"></i> Messages <span class="badge badge-info">4</span></a></li>
        <li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
        <li><a href="#"><i class="icon-comment"></i> Shoutbox</a></li>
        <li><a href="#"><i class="icon-user"></i> Staff List</a></li>
        <li><a href="#"><i class="icon-flag"></i> My Infractions</a></li>
        <li><a href="#"><i class="icon-exclamation-sign"></i> Rules &amp; Regulations</a></li>
        <li><a href="#"><i class="icon-off"></i> Logout</a></li>
    </ul>
</li>
<!-- RADIO DJ -->
<li class="nav-header">
    <a href="#" data-toggle="collapse" data-target="#radioDJMenu">
    <font color="#34CCFF">Radio DJ</font> <i class="icon-angle-down"></i>
    </a>
    <ul style="list-style: none;" class="collapse" id="radioDJMenu">
        <li><a href="#">Information &amp; Stats</a></li>
        <li><a href="#">DJ Says</a></li>
        <li><a href="#">Request Line</a></li>
        <li><a href="#">Timetable</a></li>
        <li><a href="#">Banned Songs</a></li>
    </ul>
</li>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-05-20 00:12:04

2018年更新的

您可以使用jQuery来完成此操作。

代码语言:javascript
复制
$('[data-toggle=collapse]').click(function(){
    $(this).find("i").toggleClass("icon-angle-right icon-angle-down");
});

我根据您上一个关于折叠菜单的问题更新了Bootply。

Bootstrap 3.x Toggle Icon Demo

Bootstrap 4的概念与此类似,不同之处在于in现在是show,并且不再有图标:https://www.codeply.com/go/bp/wS2OYMzQdr

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16635448

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档