javascript - jquery 1.7.1 隐藏和显示无法正常工作

Question

我有一个元素最初被内联样式显示隐藏:无。单击另一个元素时，我想显示隐藏的元素，然后重新单击时，我想再次隐藏它。但会发生的情况是，如果我在 else 语句中放置任何内容，它不会显示或隐藏，但如果我将 else 留空，它将显示该元素。

还有切换();和 .is(:hidden) 也不起作用。

jquery 版本是 jQuery v1.6.4 或 jQuery v1.7.1

出了什么问题？

  //this does not work
$('#cust_select').click(function(e) {

    var element =  document.getElementById('cust_list');

    if($('#cust_list').css('display') === 'none') {
        $('#cust_list').show(); 
    }
    else if($('#cust_list').css('display') !== 'none'){
        $('#cust_list').hide(); 
    }


//this will show the element
$('#cust_select').click(function(e) {

    var element =  document.getElementById('cust_list');

    if($('#cust_list').css('display') === 'none') {
        $('#cust_list').show(); 
    }
    else if($('#cust_list').css('display') !== 'none'){
       //do nothing
    }
});

html:

  <ul id="selectLinkTop" class="clickMenu selectmenu SugarActionMenu" name="">
                <li class="sugar_action_button">
                  <input id="checkallContacts" class="checkbox massall" type="checkbox" name="checkallContacts" style="float: left;margin: 2px 0 0 4px;" onclick="">
                  <ul id="cust_list" style="background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;box-shadow: 0 5px 10px #999999;float: left;left: 0;list-style: none outside none;margin: 0;overflow: hidden;padding: 8px 0;position: absolute;top: 18px;width: auto;z-index: 10;display: none;">
                    <li style="clear: both;margin: 0;padding: 0;white-space: nowrap;width: 100%;"><a id="button_select_this_page_top" style="border: 0 none !important;float: left;font-size: 12px !important;padding: 1px 10px !important;text-align: left;width: 100%;line-height: 18px;display: block;" href="#">Select This Page</a></li>
                    <li style="clear: both;margin: 0;padding: 0;white-space: nowrap;width: 100%;"><a id="button_select_all_top" style="border: 0 none !important;float: left;font-size: 12px !important;padding: 1px 10px !important;text-align: left;width: 100%;line-height: 18px;display: block;" href="#" name="selectall">Select All‎</a></li>
                    <li style="clear: both;margin: 0;padding: 0;white-space: nowrap;width: 100%;"><a id="button_deselect_top" style="border: 0 none !important;float: left;font-size: 12px !important;padding: 1px 10px !important;text-align: left;width: 100%;line-height: 18px;display: block;" href="#" name="deselect">Deselect All</a></li>
                  </ul>
                  <span id="cust_select" class="subhover"> </span>
                </li>
                </ul>'

Answer 1

用途:

$('#cust_select').click(function(e) {
    $('#cust_list').toggle();
});