1

我有一个代码，功能是下拉。下拉菜单可以顺利工作。现在我想在单击评论时，框将永久显示，并在外部单击时关闭。

在这种情况下，当我单击评论时，框显示并且当我拖动鼠标输入评论时，它关闭了。

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

.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>
4

1 回答 1

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/

于 2012-08-13T09:30:26.587 回答