html - 单击/打开 Bootstrap 下拉菜单时，图标会更改以表示其打开

Question

我尝试过使用一些 Javascript，但显然没有成功。我想这将是构建到 future 版本的 Bootstrap 中的一个很好的功能。理想情况下，我更愿意使用 CSS 在单击下拉菜单时将图标更改为替代图标。 - http://bootply.com/67306

            <li class="dropdown">
                            <a href="#" class="dropdown-toggle tablet-home-drop" data-toggle="dropdown">All Destinations <i class="icon-align-justify"></i></a>
                            <ul class="dropdown-menu drop-hover">
                                <li class="dropdown-submenu">
                                <a href="#">More options</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Second level link</a></li>
                                    <li><a href="#">Second level link</a></li>
                                    <li><a href="#">Second level link</a></li>
                                    <li><a href="#">Second level link</a></li>
                                    <li><a href="#">Second level link</a></li>
                                </ul>
                                </li>
                                <li class="dropdown-submenu">
                                <a href="#">More options</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Second level link</a></li>
                                    <li><a href="#">Second level link</a></li>
                                    <li><a href="#">Second level link</a></li>
                                    <li><a href="#">Second level link</a></li>
                                    <li><a href="#">Second level link</a></li>
                                </ul>
                                </li>
                                <li class="dropdown-submenu">
                                <a href="#">More options</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Second level link</a></li>
                                    <li><a href="#">Second level link</a></li>
                                    <li><a href="#">Second level link</a></li>
                                    <li><a href="#">Second level link</a></li>
                                    <li><a href="#">Second level link</a></li>
                                </ul>
                                </li>
                            </ul>
                            </li>

Answer 1

当下拉菜单打开时，您需要更改图像在 sprite 上指向的位置。您必须找到/设置自己的背景位置。

示例:

.tablet-home-drop > .icon-align-justify {
    margin-left: 45px;
}
.dropdown.open .tablet-home-drop > .icon-align-justify {
    background-position:-48px -72px;
}