Question

我有一个自定义下拉列表工作正常，除非我点击切换起始元素移动。有人有主意吗？我尝试用宽度位置等改变代码。

HTML：

    <div class="element" style="position: absolute; right: 200px; top:50px; color: white; cursor: pointer;">
        <span class="my-dropdown" href="#" id="user-name">
            john doe <span style="font-size:smaller;">&#9660;</span>
        </span>
        <ul class="my-dropdown-menu" data-for="user-name">
            <li><a href="#">Logout</a></li>
            <li><a href="#">Change Password</a></li>
            <li><a href="#">Profile</a></li>
        </ul>
    </div>

的CSS：

.my-dropdown-menu a, .link {
  color: black;
}

.my-dropdown-menu a:visited, .visited {
   color: black;
}

.my-dropdown-menu a:active, .active {
   color: black;
}

.my-dropdown {
    color: white;
    font-size: larger;
    position: relative;
    width: 300px;
}

.my-dropdown-menu {
    display: none;
    color: black;
    font-size: large;
    text-align: left;
    padding-left: 20px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: relative;
    left: -30px;
    z-index: 50;
    background-color: white;
    width: 200px;
    border-radius: 5px;
}

.my-dropdown-menu li{
    margin-top: 20px;
    margin-bottom: 20px;
}

JS：

$('.my-dropdown').on("click", function () {
    var id = $(this).prop('id');
    console.log(id);
    var dropDown = $("ul[data-for='" + id + "']");
    dropDown.toggle();
});

我还整理了jsbin

Answer 1

span是一个内联元素。请改用div中的.my-dropdown。

http://jsfiddle.net/jhut61ro/4/

修改

您在该元素中也有href属性。你应该删除它。

Answer 2

.my-dropdown {
    display: block;
}

.my-dropdown元素是span，它不是块级元素。因此，它不占用块级元素所执行的空间，因此它根据下一个块级元素的位置移动（在这种情况下为ul，因为它被隐藏然后显示）。 / p>

click事件后元素移动

2 个答案: