Получить идентификатор щелкнутого родительского ID

Question

Я пытаюсь использовать evt.parent.attr («id») внутри jsddm_close, но это не сработает.

<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

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 2

Позвольте мне предисловие к этому, сказав, что я не понимаю, почему вы реализуете меню. Только не делай этого. Нет причин. Получите что-то вроде [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> s. Если нет, весь ребенок <ul> из jsddm скрыт.

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>