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

Question

我尝试过使用一些 Javascript，但显然没有成功。我想这将是一个很好的功能，可以构建到未来版本的引导程序中。理想情况下，我更喜欢在单击下拉菜单时使用 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

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

例子：

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