Javascript 如何使下拉菜单在单击按钮元素时展开？

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

我相信答案在

您的代码实际上与上面的代码相差不远：

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

---

希望这有帮助

我相信答案在

您的代码实际上与上面的代码相差不远：

<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();
});

---

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

您也可以尝试使用Javascript和Jquery来实现

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

---

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

HTML不是很好。你不应该在一个按钮标签里有一个锚等等。容器应该只是一个DIV，而不是一个按钮。那么使用DIV是一个最佳实践吗？我重拨了它。但是，现在如何打开菜单单击“div”，而不仅仅是img？您可以向锚定标记添加

数据目标

属性，然后在每次单击按钮时向要展开的元素添加id

data target=“#elementToExpand”

@Healforgreen这能做什么？@v.g.这里的简短答案（）很好地解释了这一点。该属性可能仅限于按钮元素，但我不确定。我已经有一段时间没有使用Bootstrap了。HTML不是很好。你不应该在一个按钮标签里有一个锚等等。容器应该只是一个DIV，而不是一个按钮。那么使用DIV是一个最佳实践吗？我重拨了它。但是，现在如何打开菜单单击“div”，而不仅仅是img？您可以向锚定标记添加

数据目标

属性，然后在每次单击按钮时向要展开的元素添加id

data target=“#elementToExpand”

@Healforgreen这能做什么？@v.g.这里的简短答案（）很好地解释了这一点。该属性可能仅限于按钮元素，但我不确定。我已经有一段时间没有使用Bootstrap了。不，这没用。我仍然可以在div上看到“手”鼠标指针，但我只能在imageNo上单击来展开菜单，这没有帮助。我仍然可以在div上使用“手动”鼠标指针，但我只能在图像上单击来展开菜单谢谢，但我想做的是最佳实践，而不是黑客：）基本上这是Javascript的一个很好的实践。我不知道你是否有兴趣学习它。如果你是，你应该在codecademy.com上查看“创建一个互动网站”模块（它是免费的。）谢谢，但我想做的是最佳实践，而不是黑客：）基本上这是一个Javascript的好实践。我不知道你是否有兴趣学习它。如果你是，你应该在codecademy.com上查看“创建互动网站”模块（免费；）