如何使下拉列表展开单击按钮元素

How to make dropdown expand clicking on the button element?

本文关键字：单击 按钮 元素 何使 下拉列表      更新时间：2023-09-26

目前，仅当我单击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>

我使用数据目标修改了代码，但我仍然需要单击图像而不是按钮来展开下拉菜单。有什么建议吗？

<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>
我相信

答案在twitter-bootstrap javascript部分有明确的说明

你的代码离那里的代码并不远：

<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>

希望这有帮助

你也可以尝试用Javascript和Jquery来做到这一点。

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

这是一个非常精简的版本，但它应该可以工作。

相关文章：