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

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

到目前为止，我发现当用户输入下拉菜单的内容时，menu元素处于悬停状态

我做这把小提琴是为了说明我的问题所在

代码如下：

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

---

如何使下拉菜单内容成为其父菜单的一部分？或者防止触发悬停/鼠标移出？

可能是您想要的。如果我理解正确的话

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

---

所以我最后使用了一点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>

jQueryJavascript：

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

---

我希望这能有所帮助：。

不清楚你的实际问题和你想要什么？@Stefan-到目前为止，这似乎是一个正常的下拉列表。。。您能详细说明一下吗？下拉菜单内容是否不是容器的子项？问题是，当输入菜单内容时，左边的元素会被触发。@Stefan-是的，这是浏览器的问题。我刚查了一下firefox。。。在那里它表现得很好。但是Chrome就像你说的那样。哦，你是对的。在firefox上，正如我所预料的那样。你知道如何修复它吗？非常感谢，但它对我在chrome 42中的最初不良影响。你所说的不良影响是什么意思？当我进入菜单内容时，info div切换到element left

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