Question

我已经使用了一些Javascript，显然没有成功。我想这将构建到未来版本的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

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

示例：

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

单击/打开引导程序下拉列表时，图标将更改为表示其打开状态

1 个答案: