Question

我想做什么：我在.slideDown（）中有一个下拉菜单 - 最初在悬停时触发的div。问题：当用户输入下拉菜单的内容时，div会向上滑动。

到目前为止，当用户输入下拉菜单的内容时，我发现菜单元素已被留下（悬空）。

我做了这个小提琴，以说明我的问题。

以下是代码：

<div id="container">
<form role="form">
  <div class="form-group">          
    <select class="form-control">
      <option>a</option>
      <option>b</option>
    </select>
  </div>
</form>
</div>

<div id="info">no action done</div>

$("#container").hover(function() {
    $("#info").text("element entered"); 
}, function() {
    $("#info").text("element left");
});

如何将下拉菜单内容作为其父级的一部分？或者阻止触发hoverout / mouseout？

Answer 1

你可能想要这个。如果我理解正确的话。

$("#container select").hover(function() {
    $("#info").text("element entered"); 
}, function() {
    $("#info").text("element left");
});

Demo

Answer 2

所以我最后得到了一些jQuery和一点点CSS。这只是您的参考。您当然可以使用它并根据需要进行修改。这里的一个优点是你可以控制一切，你可以改变颜色和一切，就像你想要适合你的主题一样。一旦掌握了逻辑，就可以很容易地添加更多自己创建的下拉列表。

所以我们走了：

HTML：

<div class="selectedItem">
    Selected Item: None
</div>
<div class="dropdown">
    <span class="dropdownText">Select</span>
    <div class="dropdownGroup">
        <div class="dropdownGroupItem"> Item 1 </div>
        <div class="dropdownGroupItem"> Item 2 </div>
        <div class="dropdownGroupItem"> Item 3 </div>
        <div class="dropdownGroupItem"> Item 4 </div>
    </div>
</div>

CSS：

.dropdown {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 95px; /*Padding makes this 100px in total.*/
    height: 27px;
    line-height: 27px;
    background: #DDDDDD;
    border: 1px solid black;
    border-radius: 3px;
    padding-left: 5px;
    cursor: pointer;
}

.dropdownGroup {
    position: absolute;
    top: 100%;
    left: -1px; /*Account for the border and move 1 to the left (2px / 2 = 1px)*/
    width: 100%;
    background: #909090;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-radius: 0px 0px 3px 3px;
    overflow: hidden;
    visibility: hidden;
}

.dropdownGroupItem {
    position: relative;
    background: transparent;
}

.dropdownGroupItem:hover {
    background: gray; 
}

jQuery（Javascript）：

var selectedItemText; //Use something like this to save your selected values for later use.
$(".dropdown").click(function() {
    var visibility = $(".dropdownGroup").css("visibility");
    if (visibility == "hidden") {
        $(".dropdownGroup").css("visibility", "visible");
    }       
});

$(".dropdownGroupItem").click(function(e) {
    e.stopPropagation(); //Prevent $(".dropdown").click() from being executed.
    selectedItemText = $(this).text();
    $(".selectedItem").text("Selected Item: " + selectedItemText);
    $(".dropdownText").text(selectedItemText);
    $(".dropdownGroup").css("visibility", "hidden");
});

我希望这会有所帮助:)。

如何使父元素的下拉菜单的内容成为一部分？

2 个答案: