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

Question

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

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

我做这个 fiddle 是为了说明我的问题所在。

代码如下：

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

希望对您有所帮助:)。

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

How to make the content of a dropdown menu part of the parent-element?

html

jquery

drop-down-menu