从页脚菜单打开标题菜单中的下拉列表

时间:2017-01-24 18:58:34

标签: twitter-bootstrap drop-down-menu

我有一个标题菜单,其中一个项目提供一个大的4列下拉菜单。为了避免在页脚菜单中放入所有18个链接,我只想放置一个链接。

在页脚菜单中单击该链接时,我想将页面滚动到页眉菜单(使用简单的锚点/名称成功),但我还想打开该下拉菜单。可以通过twitter-bootstrap date-properties实现吗?

标题菜单代码:

<ul>
    <li><a href="link1">item 1</a></li>
    <li>
        <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" target="#submenu" href="#" name="submenu">item2 <span class="caret"></span>
        </a>
        <ul class="dropdown-menu multi-column columns-4">
            <div class="row">
                <div class="col-sm-3">
                    <ul class="multi-column-dropdown">
                        <li><span class="header">HEADER1</span></li>
                        <li class="divider"></li>
                        <li><a href="sublink1">subitem1</a></li>
                        <li><a href="sublink1">subitem2</a></li>
                        <li><a href="sublink1">subitem3</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <ul class="multi-column-dropdown">
                        <li><span class="header">HEADER2</span></li>
                        <li class="divider"></li>
                        <li><a href="sublink1">subitem1</a></li>
                        <li><a href="sublink1">subitem2</a></li>
                        <li><a href="sublink1">subitem3</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <ul class="multi-column-dropdown">
                        <li><span class="header">HEADER3</span></li>
                        <li class="divider"></li>
                        <li><a href="sublink1">subitem1</a></li>
                        <li><a href="sublink1">subitem2</a></li>
                        <li><a href="sublink1">subitem3</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <ul class="multi-column-dropdown">
                        <li><span class="header">HEADER4</span></li>
                        <li class="divider"></li>
                        <li><a href="sublink1">subitem1</a></li>
                        <li><a href="sublink1">subitem2</a></li>
                        <li><a href="sublink1">subitem3</a></li>
                    </ul>
                </div>
            </div>
        </ul>
    </li>
    <li><a href="link3">item3</a></li>
</ul>

页脚菜单代码:

<ul>
    <li><a href="link1">item 1</a></li>
    <li><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" target="#submenu" href="#submenu" name="submenu">item2</a></li>
    <li><a href="link3">item3</a></li>
</ul>

0 个答案:

没有答案