如何解决在React-Javacript / CSS中单击时,下拉箭头向下移动
我在理解此问题时遇到了一些困难,我已经使用ReactJS在dropdown
中创建了Nav-bar
菜单,当我单击它时,它将显示一个下拉菜单项,但是它也会移动下拉箭头的位置。
我试图将高度和位置调整为absolute
,但仍然相同,请提出任何建议/指针。
- Update1 更新了CSS设置,如下所示:
-CSS setting
.btn-group {
position: relative;
}
.btn-group >div {
position: absolute;
}
-Snippet
代码
return (
<nav className="header">
<label className="logo">
<a href="/">
<img className="yoga-image" />
</a>
</label>
<ul>
<li>
<a href="./basket">
<i className="fa" style={{ "font-size": "24px" }} href="./basket">

</i>
<span class="badge badge-warning" id="lblCartCount">
{productItemInCart}
</span>
</a>
</li>
// the Signin/register button and dropdown code starts from here under the <li>
<li>
<button variant="success" href="./signin" style={{ background: "none",borderStyle: "none",outline: "none " }}>
{userstatus ? (
<i
style={{ border: "none",background: "none",outline: "none" }}
className=" fas fa-user-circle
"
></i>
) : (
<i
style={{
"border": "none","background": "none","outline": "none","font-size": "1.8rem","fontFamily": "Roboto","textTransform": "none","marginLeft": "-3rem",}}
>
Sign in/ Register
</i>
)}{" "}
</button>
// the below div define the drop down arrow
<div class="btn-group" style={{ minHeight: "15px",maxHeight: "15px",positiom: "fixed" }}>
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded=" !important"
>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">
Action
</button>
<button class="dropdown-item" type="button">
Another action
</button>
<button class="dropdown-item" type="button">
Something else here
</button>
</div>
</div>
</li>
</ul>
</nav>
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。