Question

目前只有点击img标签才会出现下拉菜单。点击按钮标签时如何显示？这是我的代码：

<div class="btn btn-link dropdown account-menu-btn">
                <a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
                    <img src="~/Assets/profile_pic.jpg" class="img-circle">
                </a>
                <ul class="dropdown-menu pull-right" role="menu">
                    <li>
                        <a href="#">
                            Create
                        </a>
                    </li>
                </ul>
            </div>

我使用data-target修改了代码，但是仍然需要单击图像而不是按钮来展开下拉菜单。任何sugestions？

<div class="btn btn-link dropdown account-menu-btn" style="background-color:yellow" data-target="#myModal">
                <a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
                    <img src="~/Assets/profile_pic.jpg" class="img-circle">
                </a>
                <ul id="myModal" class="dropdown-menu pull-right" role="menu">
                    <li>
                        <a href='@Url.Action("About", "Home")'>
                            Create
                        </a>
                    </li>
                </ul>
            </div>

Answer 1

我相信答案已在twitter-bootstrap javascript section

中明确说明

你的代码与那里的代码并不太远：

<div class="btn btn-link dropdown account-menu-btn">
    <a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        <img src="~/Assets/profile_pic.jpg" class="img-circle">
        <span class="caret"></span>
    </a>

    <ul class="dropdown-menu pull-right" aria-labelledby="dLabel">
        <li>
            <a href="#">Create</a>
        </li>
    </ul>
</div>

希望这有帮助

Answer 2

您也可以尝试使用Javascript和Jquery。

$( '#BUTTONID' ).click(function() { 
    $( '#MENUID' ).toggle();
});

这是一个非常简洁的版本，但应该可以使用。

如何使用dropdown点击按钮元素？

2 个答案: