Question

我有一个代码，函数是下拉列表。下拉可以顺利进行。现在我想点击评论时，框会显示永久性，并会在外部点击时关闭。

在这种情况下，当我点击评论，框显示，当我拖动鼠标输入评论时，它就会关闭。

那我怎么能保留这个盒子？

.dropdown {
position:relative;
}

.dropdown-menu {
position:absolute;
top:100%;
left:0;
z-index:1000;
display:none;
float:left;
min-width:300px;
list-style:none;
background-color:#fff;
border:1px solid rgba(0,0,0,0.2);
border-right-width:2px;
border-bottom-width:2px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
box-shadow:0 5px 10px rgba(0,0,0,0.2);
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box;
margin:1px 0 0;
padding:4px 0;

.navbar .dropdown-menu:after {
position:absolute;
top:-6px;
left:10px;
display:inline-block;
border-right:6px solid transparent;
border-bottom:6px solid #fff;
border-left:6px solid transparent;
content:'';

.open .dropdown-menu {
display:block;
}

<span class="navbar">
            <span class="dropdown">
                <a data-toggle="dropdown" class="comment" href="#">Comment</a>
                <ul class="dropdown-menu">
                    <li><input type="text"></li>
                </ul>
            </span>
            </span>

Answer 1

根据我的理解，你可能想要http://jsfiddle.net/H3Vnw/1/。像这样写

$('.comment').click(function(){
    $('.dropdown-menu').css({'display': 'block'});
});

更新

像这样写

var com = $('.comment');
var menu = $('.dropdown-menu');

        com.click(function() {
            menu.show(); return false;
        });

        $(document).click(function() {
            menu.hide();
        });

        menu.click(function(e) {
            e.stopPropagation();
        });

选中此http://jsfiddle.net/H3Vnw/4/

CSS永久显示框

1 个答案: