无法单击 jQuery 菜单项

我创建了一个jQuery菜单，单击一个小图标时将打开该菜单。此菜单包含一些可单击的链接和一个将执行一些js操作并在同一菜单中创建新文本框的链接。但是当我点击链接时，菜单会自动关闭。因此，即使显示文本框，在我们再次单击该图标以查看菜单之前，也无法看到它。

这是一个演示：http://jsfiddle.net/W2exq/1/

我使用了一些jQuery代码来显示和隐藏菜单，并显示文本框。那么，除非我们在菜单外部单击以关闭菜单，否则如何保持菜单打开？如果您需要任何其他东西，请告诉我。

.HTML：

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js></script>
        <link rel="stylesheet" type="text/css" href="http://tharunjose.com/stack/style.css" />
</head>
<div class="notes">
    <div class="noteTooltip">
        This link is for the special purpose of the main site.<hr />
        <a class="noteEdit" id="add_btn" href="#">Edit note</a>
        <a class="noteTrash" href="#"></a>
    </div>
</div>

.CSS：

.notes{
    position:relative;
    width:16px;
    height:16px;
    margin:0 auto;
    background:url(http://tharunjose.com/stack/images/icons.png) no-repeat scroll -228px -34px transparent;
}
.notes:hover{
    cursor:pointer;
    background-position:-207px -34px;
}
.noteTooltip{
    display:none;
    position:absolute;
    top:25px;
    left:-10px;
    width:130px;
    text-align:left;
    line-height:18px;
    border:2px solid #363636;
    z-index:9999;
    background:#fbfbfb;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    padding:10px 10px 6px 10px;
    cursor:auto;
}
.noteTooltip:before{
    content:'';
    position:absolute;
    top:-10px;
    left:10px;
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:8px solid #000;
    z-index:9999;
}
.noteEdit{
    color:#3ba5d5;
    text-decoration:none;
    float:left;
}
.noteTrash{
    display:block;
    float:right;
    padding:6px;
    background:url(http://tharunjose.com/stack/images/icons.png) no-repeat scroll -20px -106px transparent;
}

.JS：

$(document).ready(function() {  
    $(document).click(function(e) {
        $(".createNew, .username, .notes, .pageHelp, .buttons").removeClass("open");
    });
    $(".createNew, .username, .notes, .pageHelp, .buttons").click(function(e) {
        e.stopPropagation(); // this prevents it closing via document.click
        $(this).toggleClass("open");
    });

       var handler_func = function () {
        var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0;
        var e = document.createElement('input');
        e.type='text';
        e.width=40;
        e.name = 'added'+i;
        this.rel = i+1;
        this.parentNode.appendChild(e);
        return false;       
        }
        var add_btn = document.getElementById('add_btn');
        if(add_btn.attachEvent)
              add_btn.attachEvent('onClick', handler_func);
        else if(add_btn.addEventListener) //Firefox & company
              add_btn.addEventListener('click', handler_func, false);
});

您需要

在 .noteTooltip 上添加单击侦听器：

$(".noteTooltip").click(function(e) {
    e.stopPropagation();
    e.preventDefault();
});

您需要阻止"click"事件冒泡 DOM 并使其关闭您的"弹出"菜单。

这是不完美的（允许您创建多个文本元素，我不会:P完成所有工作），但应该为您提供一个良好的起点：

$(document).ready(function() {  
    $(document).click(function(e) {
        $(".createNew, .username, .notes, .pageHelp, .buttons").removeClass("open");
    });
    $(".createNew, .username, .notes, .pageHelp, .buttons").click(function(e) {
        e.stopPropagation(); // this prevents it closing via document.click
        $(this).toggleClass("open");
    });
    $(".noteTooltip").click(function(e) {
        e.stopPropagation(); //stop the onclick call bubbling up the DOM.
        e.preventDefault(); //stop the onclick call bubbling up the DOM.
    });
    $("#add_btn").click(function(event) {
       var i = (typeof this.rel != 'undefined') && (this.rel - 0) == this.rel ? this.rel : 0,
           element = document.createElement('input');
       event.stopPropagation();  //stop the onclick call bubbling up the DOM.
       element.type='text';
       element.width=40;
       element.name = 'added'+i;
       this.rel = i+1;
       this.parentNode.appendChild(element);
       return false;   
    });
});

event.stopPropagation() 防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

一篇关于事件冒泡的博客文章。

jsFiddle 示例。

您需要在

单击Edit Note时以及单击添加的文本框时停止事件传播。

只需在您的handler_func中传递事件

var handler_func = function (evt)

并在同一函数中的return false;之前添加

e.onclick = function(e1) {
              e1.stopPropagation();
           }
evt.stopPropagation();

这将解决问题。

演示

相关内容

最新更新

热门标签：