Question

我创建了一个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);
});

Answer 1

您需要在.noteTooltip上添加一个点击监听器：

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

Answer 2

你需要阻止“点击”事件冒泡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树，防止任何父处理程序被通知事件。

事件冒泡时blog post。

jsFiddle example

Answer 3

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

只需在handler_func

中传递活动即可

var handler_func = function (evt)

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

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

这将解决问题。

Demo

无法单击jQuery菜单项

3 个答案: