Question

我有案文投入和隐蔽的清单。清单将显示并隐藏在集中和混淆投入上。然而,我希望名单上的人(除投入外)在我点击名单上时,即当名单上点击时,我只躲藏该名单。如何做到这一点?

==========

<input type="text" id="regioninput">
<ol class="continentlist">
  //php code to generate list items
</ol>

==== js ====

$( #regioninput ).bind( focus , function() {
    $( .continentlist ).show();
});
$( #regioninput ).bind( blur , function() {
    $( .continentlist ).hide();
});
$( .continentlist li ).live( click , function() {
    alert($(this).html());
    ...
});

Answer 1

您可以修改其代码,而不是使用blur <>/code>和focus。您只能使用<代码>click。

//show the list when you click the input
$( #regioninput ).bind( click , function(event) {
    event.stopPropagation();
    $( .continentlist ).show();
});

//hide the list when the document receives a click
$(document).bind( click , function () {
    $( .continentlist ).hide();
});

//make sure that if the user clicks on the list they won t hide it
$( .continentlist ).bind( click , function(event) {
    event.stopPropagation();
});

http://jsfiddle.net/qUeXS/“rel=“nofollow” http://jsfiddle.net/qUeXS/。

event.stopPropagation() stops the event from bubbling up the DOM: http://api.jquery.com/event.stoppropagation

On a side-note, this works because of event bubbling. No matter where you click on a document, the document object will receive that click event after it bubbles all the way up the DOM. So if we cancel the bubbling of the event we can stop the document object from receiving the event.

友情链接