-1

我在php中创建了一个arraylist

它被放置在一个按钮中。当我单击它打开按钮时,它会打开所有 aaraylist 但链接到的代码存在一些问题,代码在这里
有人可以告诉我问题出在哪里。

var Arraylist<String> = new Arraylist<String>;
4

4 回答 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();
    }
});

这是它应该是什么样子 jqgrid 结果


这里是所有参考资料

于 2012-10-23T12:22:24.093 回答