如何隱藏鋰無線電點擊

Question

時，一旦點擊對象並顯示含有單選按鈕div的，李不掩飾也不上點擊電臺關閉華里。

請參閱下面的代碼示例。認爲我沒有針對正確的對象/類來做我想做的事。我應該使用id而不是css類名。？

//click to show li (in css i have put display to none) 
     $('div.ribbonBoxarrow').click(function() { 
     $('.ribbonBoxarrow li').show('medium'); 
     return false; 
     }); 
// once you leave the div (works thanks kevin. selctor missing 
     $('.ribbonBoxtab').mouseleave(function() { 
     $('ribbonBoxarrow li').hide('slow'); 
     return false; 
     }); 
//if a radio buttn is clicked the hide li still not working 
     $("input[name='domain_ext']").each(function() { 
     $('.ribbonBoxarrow li').hide('slow'); 
     return false; 
     }); 

CSS -----

/* Ribbon radio drop box */ 
.ribbontableBox { 
    width: 62px; 
    height: 50px; 
    float: left; 
    margin-left: 7px; 
    margin-top: 7px; 
    border: 1px solid #f1f1f1; 
    border-radius: 2px; 
} 
.ribbontableBox:hover { 
    width: 62px; 
    height: 50px; 
    float: left; 
    margin-left: 7px; 
    margin-top: 7px; 
    border: 1px solid #72B8E2; 
    background: #AED5F4; 
} 

.ribbonBoxtext { 
    width:52px; 
    height:50px; 
    float: left; 
} 

.ribbonBoxtext ul { 
    display: block; 
    list-style: none; 
} 

.ribbonBoxarrow { 
    width: 10px; 
    height: 50px; 
    float: left; 
} 
.ribbonBoxarrow ul { 
    width: 10px; 
    display: block; 
    height: 50px; 
    background: #ffffff; 
} 
.ribbonBoxarrow ul:hover { 
    background: #AED5F4; 
} 

.ribbonBoxarrow li { 
    background: #ffffff; 
    height: 110px; 
    width: 120px; 
    display: none; 
    position: relative; 
    top:45px; 
    left: -57px; 
    border: 1px solid #72B8E2; 
} 
/*.ribbonBoxarrow ul:hover > li { 
    background: #ffffff; 
    height: 110px; 
    width: 120px; 
    display: block; 
    position: relative; 
    top:45px; 
    left: -57px; 
    border: 1px solid #72B8E2; 
}*/ 

.ribbonBoxtab { 
    background: #555555; 
    border: 1px solid #eeeeee; 
    height: 0px; 
    width: 180px; 
    position: relative; 
    display:inherit; 
} 


</style> 

HTML -----------------

<div class="ribbonBoxarrow"> 
    <ul class="ribbonBoxarrow"> 
     <li> 

     <div class="ribbonBoxtab"> 
      <table class="domain_ext_table"> 
      <tr> 
       <td><label> 
       <input type="radio" name="domain_ext" value="all"/> 
       <span>All</span></label></td> 
       <td><label> 
       <input type="radio" name="domain_ext" value=".co.uk"/> 
       <span>.co.uk</span></label></td> 
       </tr> 
      <tr> 
      <td><label> 
       <input type="radio" name="domain_ext" value=".com"/> 
       <span>.com</span></label></td> 
       <td><label> 
       <input type="radio" name="domain_ext" value=".rnet"/> 
       <span>.net</span></label></td> 
       </tr> 
       <tr> 
       <td><label> 
       <input type="radio" name="domain_ext" value=".briz"/> 
       <span>.biz</span></label></td> 
       <td><label> 
       <input type="radio" name="domain_ext" value=".orrg"/> 
       <span>.rorg</span></label></td> 
       </tr> 
       <tr> 
       <td><label> 
       <input type="radio" name="domain_ext" value=".trr"/> 
       <span>.org.ruk</span></label></td> 
       <td><label> 
       <input type="radio" name="domain_ext" value=".rrrt"/> 
       <span>.thh</span></label></td> 
      </tr> 
      </table> 
     </div> 
    </li> 
    </ul>   
</div> 

Answer 1

該代碼缺少類選擇器中的.。我還將.each更改爲.click用於無線事件處理程序。如果您加載在頁面加載此代碼，您應該document.ready

$(document).ready(function(){ 
    //click to show li (in css i have put display to none) 
      $('div.ribbonBoxarrow').click(function() { 
       $('.ribbonBoxarrow li').show('medium'); 
       return false; 
      }); 
    // once you leave the div (which is contained in the above li hide. 
      $('.ribbonBoxtab').mouseleave(function() { 
       $('.ribbonBoxarrow li').hide('slow'); //missing . 
       return false; 
      }); 
    //if a radio buttn is clicked the hide li 
      $("input[name='domain_ext']").click(function() { //changed .each to .click 
       $('.ribbonBoxarrow li').hide('slow'); //missing . 
       return false; 
      }); 
}); 

工作實例包起來：http://jsfiddle.net/3wkpZ/