点击空白区域返回到选定区域

Question

<li class="list "><a href="javascript:">A</a> 

    <ul class="names"> 
     <li class="list"><a href="javascript:">1</a> 
     </li> 
     <li class="list"><a href="javascript:">2</a> 
     </li> 
    </ul> 
</li> 
<li class="list "><a href="javascript:">B</a> 

    <ul class="names selected"> 
     <li class="list selected"><a href="javascript:">1</a> 
     </li> 
     <li class="list"><a href="javascript:">2</a> 
     </li> 
     <li class="list"><a href="javascript:">3</a> 
     </li> 
     <li class="list"><a href="javascript:">4</a> 
     </li> 
    </ul> 
</li> 
<li class="list "><a href="javascript:">C</a> 

    <ul class="names"> 
     <li class="list"><a href="javascript:">1</a> 
     </li> 
     <li class="list"><a href="javascript:">2</a> 
     </li> 
     <li class="list"><a href="javascript:">3</a> 
     </li> 
     <li class="list"><a href="javascript:">4</a> 
     </li> 
    </ul> 
</li> 

    $('.list').click(function() { 
     var that = this; 
     $('.list').each(function() { 
      if (that == this) return true; //continue 
      $('.names:not(:hidden)', this).slideToggle(); 
     }); 
     $('ul.names', this).slideToggle(); 
    }) 
ul.names{display: none;} 
li.list{ 
    width:150px; 
     background:#A9FF7A; 
} 
ul.names { 
    width:150px; 
    background:#A9FF7A; 
} 
ul.selected{ 
    display: block; 
} 
li.selected{ 
    background:red; 
} 

在线样本：http://jsfiddle.net/gyYyd/

乙的子菜单高亮显示。如果我点击菜单A或C，然后A或C部分会打开，但是如何单击PAGE BLANK区域（背景颜色之外）返回B部分（打开B部分）

谢谢提前

Answer 1

您可以在document对象上捕获click s并触发所需列表项上的click。

$(document).click(function() { 
    var selected = $('.selected:first'); 
    if(!selected.closest('ul.names').is(':visible')) { 
     selected.closest('.list').trigger('click'); 
    } 
}); 

此外，请务必return false从当前列表项click处理程序 - 这样的列表项目正常点击不传播到上面的处理程序。

DEMO：http://jsfiddle.net/gyYyd/2/