Question

我的页面上有3个下拉列表.2显示设置为无。当我点击下拉列表时（注意只需单击，不要选择）并将鼠标悬停在hello文本上，第一个下拉列表会重置但是显示设置为无的下拉菜单也会显示在旁边。我不希望这种情况发生。

这是我的HTML代码

    <div id="mnc"> hello
</div>
<div id="slpt">
    <select id="slt">
        <option value="0">Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
        <option>Option5</option>
</select>

    <select id="slt1" style="display:none;">
        <option value="0">Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
        <option>Option5</option>
</select>

     <select id="slt2" style="display:none;">
        <option value="0">Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
        <option>Option5</option>
</select>
</div>

这是jquery代码

$(document).ready(function() {
    $('#mnc').mouseover(function() {
        $('select').hide().blur().show();
    });
});

这是jsfiddle

Answer 1

这只会影响可见的<select>元素：

$('select:visible').hide().blur().show();

参考：http://api.jquery.com/visible-selector/

但是，我不明白为什么你会在blur()电话之前隐藏它，只是为了在它之后立即再次显示它。您可以轻松地将代码缩减为仅调用.blur()。

Answer 2

如果您想要显示所有visible选择框

试

$(document).ready(function(){
$('#mnc').mouseover(function() {
        $('select:visible').hide().blur().show();
    });
});

根据编辑到可见下拉列表的评论

修改

Answer 3

使用:visible ..这会选择所有仅可见的元素

这是小提琴..

http://jsfiddle.net/PZCQq/4/

Jquery $（element）.hide（）。blur（）。show（）显示所有元素

3 个答案: