javascript - 单击单选按钮时如何隐藏 li

Question

一旦单击对象并显示包含带有单选按钮的 div 的 li，它不会隐藏，单击时的单选按钮也不会关闭 li。

请参阅下面的代码示例。我认为我没有针对正确的对象/类来做我想做的事情。我应该使用 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

代码在类选择器中缺少 .。此外，我将 radio 事件处理程序的 .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/