Question

我尝试在jsddm_close中使用evt.parent.attr（“id”），但它不起作用。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var ddmenuitem      = 0;

function jsddm_open()
{  
    // When "help-menu" being click, I will toggle drop down menu. 
    ddmenuitem = $(this).find('ul').eq(0).toggle();
}

function jsddm_close(evt)
{   
    // When everywhere in the document except "help-menu" being clicked, I will close the drop down menu.
    // How I can check everywhere in the document except "help-menu"?
    if (ddmenuitem) ddmenuitem.hide();
}

$(document).ready(function()
{   
    $('#jsddm > li').bind('click', jsddm_open);
    $(this).bind('click', jsddm_close);
});
</script>

<ul id="jsddm">
    <li><a href="#">Home</a></li>
    <li><a href="#" id="help-menu"><u>Help</u><small>xx</small></a>
        <ul>
            <li><a href="#">menu item 1</a></li>
            <li><a href="#">menu item 2</a></li>
        </ul>
    </li>  
</ul>

Answer 1

让我先说一下，我不明白你为什么要实施一个菜单。只是不要这样做。没有理由。得到像[superfish] [1]这样的东西。

话虽如此，有了你的标记，我就是这样做的。 CSS：

#jsddm ul { display: none; } // hide by default

现在你真的想点击切换显示吗？用悬停来做这件事更常见吗？在这种情况下：

$(function() {
  $("#jsddm li").hover(function() {
    $(this).children("ul").show();
  }, function() {
    $(this).children("ul").hide();
  });
});

你有一个基本的菜单。

但要遵循你的道路，它将是：

$(function() {
  $(document).click(function() {
    var jsddam = $(this).closest("#jsddm");
    if (jsddm.length == 0) {
      // did not click on the menu so hide the child items
      $("#jsddm ul").hide();
    } else {
      // otherwise find the relevant list item and show
      // the child <ul> elements
      $(this).closest("li").children("ul").toggle();
    }
  });
});

我认为这更接近你的预期行为（你的问题不是100％明确）。带引用的全局变量将有各种各样的问题。如果你需要以这种方式记住某些东西，通常最好在DOM元素上使用标记类。

它的工作方式是它基本上监听所有click()个事件。如果它们发生在jsddm内，则会找到最近的列表项，并切换<ul>个。如果没有，<ul>的所有孩子jsddm都会被隐藏。

Answer 2

function jsddm_close(evt) {
    var id = evt.target.parentNode.id;
    if (id == 'help-menu') {
    }
    else {
        if (ddmenuitem) ddmenuitem.hide();
    }
}

或

function jsddm_close(evt) {
    var id = $(evt.target).parent().attr('id');        
    if (id == 'help-menu') {
    }
    else {
        if (ddmenuitem) ddmenuitem.hide();
    }
}

Answer 3

除了以下情况之外，这应该和您一样：

<script type="text/javascript">
function jsddm_open(e)
{ 
    $(this).find('ul').show();
    e.stopPropagation();
}

function jsddm_close(evt)
{   
    $("#jsddm ul").hide();
}

$(document).ready(function()
{   
    $('#jsddm > li').bind('click', jsddm_open);
    $(this).bind('click', jsddm_close);
});
</script>

获取单击的父ID的ID

3 个答案: