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

代码缺少类选择器中的.。我还为无线电事件处理程序将.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/

单击收音机时如何隐藏li

1 个答案: