Question

我正在建立一个菜单。在按钮悬停时，我想公开子div并能够使用select with options。但是当我点击下拉列表时，div被隐藏了。我做错了什么？

HTML

<div id="myButton">Hover me!
    <div id="menuBox">
        <label for="m1">Choose me!</label>
        <select id="m1">
            <option value="high">High</option>
            <option value="medium">Medium</option>
            <option value="low">Low</option>
        </select>
        <br>
        <label for="m2">Or me!</label>
        <select id="m2">
            <option value="high">High</option>
            <option value="medium">Medium</option>
            <option value="low">Low</option>
        </select>
        <br>
        <label for="m3">Also me!</label>
        <select id=m3>
            <option value="high">High</option>
            <option value="medium">Medium</option>
            <option value="low">Low</option>
        </select>
    </div>
</div>

的JavaScript

$("#myButton")
    .hover(function () {
    $(this).children().toggle().position({
        my: "left top",
        at: "left bottom",
        of: this
    });
})
   .children().hide();

CSS

#myButton {
    height:20px;
    background:red;
    float:left
}
#menuBox {
    background:blue;
    height:100px;

}
label,select{
    margin:5px;
    float:left;
    }
select{
    float:right;
}

Answer 1

<div id="myButton">Hover me!
    <div id="menuBox">
        <label for="m1">Choose me!</label>
        <select id="m1">
            <option value="high">High</option>
            <option value="medium">Medium</option>
            <option value="low">Low</option>
        </select>
        <br>
        <label for="m2">Or me!</label>
        <select id="m2">
            <option value="high">High</option>
            <option value="medium">Medium</option>
            <option value="low">Low</option>
        </select>
        <br>
        <label for="m3">Also me!</label>
        <select id=m3>
            <option value="high">High</option>
            <option value="medium">Medium</option>
            <option value="low">Low</option>
        </select>
    </div>
</div>
<style>
   #myButton {
    height:20px;
    background:red;
    float:left;
}
#myButton:hover #menuBox
{
   display: block;
}
#menuBox {
    background:blue;
    height:100px;
    display: none;
}
label,select{
    margin:5px;
    float:left;
    }
select{
    float:right;
}

</style>

不需要为此使用js你只能通过使用css来尝试这个代码

Answer 2

我能够在firefox v29.0.1上重现您的问题并稍微调整您的代码，这就是您想要的

JQUERY CODE：

         var stopBit = false;
         $("#myButton")
             .hover(function () {
            if (stopBit) {
                 stopBit = false;
                 return false;
            }
            $(this).children().toggle().position({
              my: "left top",
              at: "left bottom",
              of: this
            });
         });
         .children().hide();

       $('select').on('click', function () {
              stopBit = true
       });

现场演示： http://jsfiddle.net/6E5j8/5/

快乐编码：）

使用jQuery </select>在<select>里面的菜单

2 个答案: