Question

我有一个最初由内联样式显示隐藏的元素：none。点击另一个元素我想显示隐藏的元素，然后重新点击我想再次隐藏它。但是如果我在else语句中放入任何东西它不会显示或隐藏，但如果我将else留空，它将显示该元素。

也是toggle（）;和.is（：隐藏）也不工作。

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();
});

Answer 2

试试这个。希望它有效：）

$('#cust_select').click(function(e) {

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

if($('#cust_list').is(':hidden')) {
    $('#cust_list').show(); 
}
else if($('#cust_list').is(':visible')){
    $('#cust_list').hide(); 
}
});

jquery 1.7.1隐藏并显示无法正常工作

2 个答案: