Question

我的代码中有一个div，默认隐藏。现在我想显示div 每当用户点击显示按钮时都会完全离开。我的页面中有很多显示按钮为什么我想显示如上所述的div

    <div id="menu" style="display: none;">
       <!-- div content here -->
    </div>
       <button id="showBtn">Show</button>

Answer 1

也许最简单的方法（并且最不依赖于Javascript）是切换按钮的顺序和标记中的菜单：

<button id="showBtn">Show</button>
<div id="menu" style="display: none;">
<!-- div content here -->
</div>

这使您可以利用按钮的：焦点状态来触发相应菜单的显示。

#showBtn:focus + #menu {
  display: block!important;
}

这表示“当按钮聚焦时，找到紧随其后的菜单并显示它”。必须使用！important来覆盖内联样式。

Answer 2

听起来您想在单击按钮时将显示样式更改为“内联块”。

<div id="menu" style="display: none;">Test
   <!-- div content here -->
</div>
   <button id="showBtn" onClick="$('#menu').css('display', 'inline-block')";>Show</button>

Answer 3

您可以使用jQuery .offset()获取按钮的顶部/左侧位置，以动态定位#menu元素：

$(".show").on("click", function () {
    var topPos = $(this).offset().top;
    var leftPos = $(this).offset().left - $("#menu").width();
    $("#menu").css({
        top: topPos + "px",
        left: leftPos + "px"
    }).fadeIn(100);
})

Live exemple

如何将div完全左侧定位到单击的按钮

3 个答案: