我在php中创建了一个arraylist
它被放置在一个按钮中。当我单击它打开按钮时，它会打开所有 aaraylist 但链接到的代码存在一些问题，代码在这里。
有人可以告诉我问题出在哪里。
var Arraylist<String> = new Arraylist<String>;
问问题
421 次
4 回答
0
问题是任何点击都会立即隐藏下拉菜单，然后通过切换它使其再次可见。
我正在尝试编辑您的小提琴以尝试使其以您想要的方式工作:)。
编辑：这是一个小提琴，它可以做我认为你想要它做的事情：fiddle
我从您的小提琴中得到的想法是，您希望在单击菜单时切换菜单，如果您单击其他任何位置，则默认情况下菜单是隐藏的。
这通过记住项目是否被切换来起作用，如果没有，它将默认隐藏。
var nav = $('#nav');
nav.find('ul#nav').toggle();
var emp = $(this);
$("html").click(function() {});
$(document).bind('click', function(e) {
var dd = $("ul.dropdown");
var toggled = false;
var target = $(e.target); //2
if (target.parent().is('#nav')) {
var li = target.closest('li.menu');
toggled = true;
li.find('ul.dropdown').toggle();
}
if (!toggled) {
dd.hide();
}
});
于 2012-10-23T11:34:16.420 回答
0
您只需要在隐藏然后切换时摆脱额外的 hide() ，覆盖您的切换。
看到这个例如它工作 http://jsfiddle.net/RxJer/11/
var nav = $('#nav');
nav.find('ul#nav').toggle();
var emp = $(this);
$("html").click(function() {});
$(document).bind('click', function(e) {
var target = $(e.target); //2
var dropdown = target.parents('#nav').find('li.menu ul.dropdown');
dropdown.toggle();
});
于 2012-10-23T11:36:59.477 回答
0
尝试这个：
$(document).bind('click', function(e) {
var target = $(e.target); //2
if (target.parent().is('#nav') || target.parent().is('.menu')) {
var li = target.closest('li.menu');
var dd = li.find('ul.dropdown');
var isVis = dd.is(':visible');
$("ul.dropdown").hide();
(isVis) ? dd.hide() : dd.show();
} else {
$("ul.dropdown").hide();
}
});
于 2012-10-23T11:46:30.783 回答
0
好的，让我们用您的代码解决所有问题。我会解释你做错了什么，为什么，以及推荐什么。
第一：
HTML 标记。
您包含的示例代码包含标记错误。您将在嵌套无序列表之后关闭嵌套无序列表中的列表项之一。次要，但对于有效标记很重要。一些浏览器可能会对这些事情发疯。
我注意到的第二件事是您在列表中使用了相同的 ID。ID 对文档来说是唯一的，以便在 CSS 和 Javascript 中快速引用它。如果您打算在文档中选择多个元素，请使用类，这就是它们的用途。您可以在此处或此处阅读有关它的更多信息。
取决于您对它的预期用途；要获得相同的预期结果，请考虑改用此标记
<div class='emp_alt'>
<div class='container'>
<div class='title'>EMP</div>
<img src="http://www.iconarchive.com/download/i32215/tpdkdesign.net/refresh-cl/Symbols-Find.ico">
</div>
<div class='dropdown'>Contact no.</div>
</div>
一般来说，您拥有的元素越少，它需要的客户端处理时间就越少。当您将 CSS 应用于元素时，强烈建议您按类或 ID 选择它们，而不是按标签名称。使用标签名称可能会占用额外的处理时间，因为客户端必须进行更通用的搜索。您可以在此处阅读有关高效 CSS的更多信息。
这是一个带有更正标记的工作示例。
这是一个使用备用标记的工作示例。
我不确定您是否正在尝试完成某种工具提示行为，在这种情况下，此示例应该适合您。
jQuery (Javascript)
其他答案正确地指出了您的主要问题是您在点击时隐藏了下拉菜单。他们没有解决的是，当用户点击某个东西，并且您的文档点击选中它时，它将返回位于front的元素。
因此，当您单击文本时，#nav 元素位于前面。然而，图像本身就是一个元素，并且位于#nav 元素的前面。
这就是为什么您应该使用正确的事件，因为它们包含元素内的所有内容。
正如您在上面的示例中可能已经注意到的那样，有一种更快、更清洁、更好的方法来实现您想要的。
你应该做这样的事情
var dropdowns = $(".dropdown");
$(".nav > li").click(function(e){
//Prevent document click event from firing
e.stopPropagation();
var this_dropdown = $(this).children("ul.dropdown");
dropdowns.not(this_dropdown).hide();
this_dropdown.toggle();
});
//Hide all dropdowns if not clicked on a list item (or container)
$(document).click(function(){
dropdowns.hide();
});
注意：如果您不想停止传播，您可以使用“传感器”来代替。基本上，传感器确定布尔值的状态，然后用于确定文档点击事件是否应该执行任何操作。在文档单击时检查布尔值状态的 if 语句就足够了。
var dropdowns = $(".dropdown");
var sensor_state = true;
$(".nav > li").click(function(e){
var this_dropdown = $(this).children("ul.dropdown");
dropdowns.not(this_dropdown).hide();
this_dropdown.toggle();
}).mouseenter(function(){
sensor_state = false;
}).mouseleave(function(){
sensor_state = true;
});
$(document).click(function(){
if(sensor_state){
dropdowns.hide();
}
});
这依赖于 nav 元素具有下拉子元素的标记。这是使用您的示例的示例。
这里的问题是您的标记使此代码在单击它本身时切换下拉列表。这就是为什么我在前面的示例中添加了一个容器。
希望我至少有所了解并解决了您的问题。
更新
在您的最新评论之后，表明您正在使用 jqgrid 并且您想要一个下拉菜单，我决定创建一个相当详尽的示例来说明如何完成它。
我建议你研究代码并从中学习。你不必完全按照我的做法去做，只要你知道如何以及为什么。
功能：
- 当用户单击 jqgrid 中的联系人单元格时，它将显示下拉容器和“服务器”提供的数据（自定义数组数据比暂存 ajax 事件更容易）。服务器提供的数据在隐藏列中（在联系人列之后）
- 如果在下拉容器内单击，它不会关闭。我在其中添加了一个关闭按钮，因为否则用户可能会对如何关闭它感到困惑。有一个总比没有好
- 如果单击文档中的其他任何位置，它将关闭
- 如果用户在下拉容器可见时单击相同的单元格，它将关闭
下拉容器不附加到单元本身，而是从外部定位。这允许我们重用同一个容器，而不是为每个单元创建新容器，从而节省了我们的时间。
这就是我愿意编写的代码。剩下的就看你朋友了：）
我不愿意在这篇文章中添加更多文本，但为了完整起见，我将添加整个示例代码。
代码 | JSFiddle 示例
HTML
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.multiselect.css" />
<script src="http://trirand.com/blog/jqgrid/js/jquery.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.layout.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/ui.multiselect.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.tablednd.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.contextmenu.js" type="text/javascript"></script>
<table id="list"></table>
<div id="pager"></div>
<div id="contact_info"></div>
CSS
#contact_info{
position: absolute;
top: 0;
left: 0;
display:none;
background-color: white;
border: 1px solid gray;
padding: 5px 3px;
-moz-box-shadow: 3px 3px 4px #CCC;
-webkit-box-shadow: 3px 3px 4px #CCC;
box-shadow: 3px 3px 4px #CCC;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC')";
}
#list .contact{
cursor: pointer;
}
.container{
cursor: pointer;
}
td.contact:active{
background-color: #FBEC88;
}
.container .dropdown{
display: none;
}
.ui-jqgrid tr.jqgrow td{
white-space: normal;
}
/*
Style the dropdown box
*/
h2{
border-bottom: 1px solid lightgray;
}
p{
padding: 2px;
}
h2, p{
margin: 0;
}
.close_btn{
font-size: 10px;
line-height: 10px;
float: right;
text-decoration: none;
}
Javascript
//Preload the image to avoid flashes
search_img= new Image();
search_img.src = "http://www.iconarchive.com/download/i32215/tpdkdesign.net/refresh-cl/Symbols-Find.ico";
//The dropdown container
var contact_info = $("#contact_info");
//ID of last clicked row
var last_row;
//Sensor state determining whether document click will close the dropdown container on click
var sensor_state = true;
//Dropdown information data (base)
var dd_bp = "<img src='"+search_img.src+"'>",
dd_inf = "<h2>Contact information</h2><p>Phone: 555-12345<br/>E-mail: something@someplace.whatever<br/>P/O Box: 555555</p>"
//Data array (don't know what you use as a source, but I'll keep it simple)
//This setup allows you to send dropdown data from the server as well :)
var data_from_server = [
{id:"1",title:"Economy advisor",name:"Luke",lname:"North", contact: dd_bp, dropdown: dd_inf},
{id:"2",title:"Salesperson",name:"John",lname:"Smith",contact: dd_bp, dropdown: dd_inf},
{id:"3",title:"Economy advisor",name:"Jimmy",lname:"Hendrix",contact: dd_bp, dropdown: dd_inf},
{id:"6",title:"IT Manager",name:"Caroline",lname:"GlaDos",contact: dd_bp, dropdown: dd_inf},
{id:"5",title:"Quality Inspector",name:"Paul",lname:"Shoreman",contact: dd_bp, dropdown: dd_inf},
{id:"4",title:"Quality Inspector",name:"Liza",lname:"Ingridge",contact: dd_bp, dropdown: dd_inf},
{id:"8",title:"Distribution manager",name:"Elisabeth",lname:"Welman",contact: dd_bp, dropdown: dd_inf},
{id:"10",title:"Quality Inspector",name:"John",lname:"Johansson",contact: dd_bp, dropdown: dd_inf},
{id:"11",title:"Economy advisor",name:"Tommy",lname:"the Knuckle",contact: dd_bp, dropdown: dd_inf},
{id:"9",title:"Manufacturer",name:"Rosa",lname:"Minx",contact: dd_bp, dropdown: dd_inf}
];
//Adds the content to and repositions the dropdown container to the current row cell
function show_contact_info(rowid){
var row = $("#"+rowid),
contact_cell = $("td.contact", row),
dropdown_content = $("td.dropdown", row).html();
//Add the content
contact_info.html(dropdown_content).append("<a class='close_btn' href='#'>close</a>");
//Add a close button event
$(".close_btn").on("click", function(e){
e.preventDefault();
contact_info.hide();
});
//Position the contact info box
contact_info.css({
//The last calculations will center the container
left: contact_cell.offset().left - contact_info.outerWidth()/2 + contact_cell.outerWidth()/2,
//The last calculation will position the container below the cell, replace it with
// -contact_info.outerHeight() to position it above the cell
top: contact_cell.offset().top + contact_cell.outerHeight(),
});
contact_info.show();
}
function sensor_enter(){sensor_state = false;}
function sensor_leave(){sensor_state = true;}
function add_sensor(element){
element
.on("mouseenter", sensor_enter)
.on("mouseleave", sensor_leave);
}
//Setup jqgrid
$("#list").jqGrid({
datatype: "local",
width: 600,
colNames:['EID', 'Title','First name', 'Last name', 'Contact', "Dropdown"],
colModel:[
{name:'id',index:'id', width:20, sorttype:"int"},
{name:'title',index:'title', width:90},
{name:'name',index:'name', width:50, align:"left"},
{name:'lname',index:'lname', width:50, align:"left"},
{name:'contact',index:'contact', width:25, align:"center", classes:'contact'},
{name:'dropdown', index:'dropdown', hidden:true, classes:'dropdown'}
],
rowNum:10,
rowList:[5,10,15],
pager: '#pager',
viewrecords: true,
caption:"Employees",
onSelectRow: function(rowid, status, e){
var row = $("#"+rowid)
//"Hide" selection so that cell selection looks "cooler" :)
row.attr("class", "ui-widget-content jqgrow ui-row-ltr ui-state-hover");
},
onCellSelect: function(rowid, iCol, cellcontent, e){
if(iCol == 4){
if(last_row == rowid){
if(contact_info.is(":hidden")){
show_contact_info(rowid);
}else{
contact_info.hide();
}
}else{
show_contact_info(rowid);
}
last_row = rowid;
}
},
idPrefix: "emp_",
gridComplete: function(){
//Because the content is dynamic, we need to add it after the grid has finished
//This should be done for server generated content, ie the loadComplete event for server requests
add_sensor($("tr td.contact"));
}
});
$("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
for(var i=0;i<=data_from_server.length;i++){
$("#list").jqGrid('addRowData',i+1,data_from_server[i]);
}
//Sensor for the dropdown container
add_sensor($("#contact_info"));
//Hide contact info on document click
$(document).click(function(){
if(sensor_state){
contact_info.hide();
}
});
这是它应该是什么样子
这里是所有参考资料
于 2012-10-23T12:22:24.093 回答