CSS展示框永久

我有一个代码，该功能是下拉式的。下拉可以顺利进行。现在我想点击评论时，框会显示永久性并且会与外部点击关闭。CSS展示框永久

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

那么我该如何保留这个盒子？

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

来源

2012-08-13 X-men

你可以创建http://jsfiddle.net/一个例子更好地理解 – sandeep 2012-08-13 09:14:44

嗨sandeep，这是例子：http://jsfiddle.net/laststandxmen/H3Vnw/ – 2012-08-13 09:22:40

@ X-men：你不必将jquery的代码粘贴在小提琴上。只需从左边的“选择框架”部分中的下拉菜单中选择它 – 2012-08-13 09:49:35

根据我的理解可能是那个你想要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-13 09:30:26 sandeep

感谢分享sandeep，我已尝试使用此代码并开展工作。那么我怎样才能关闭盒子表格？ – 2012-08-13 09:44:12

您好sandeep，如何右键单击。我试过你的代码，但是当右键点击时，它关闭了这个盒子。 – 2012-08-13 10:03:37

CSS展示框永久

回答

相关问题