0

I have an element that is initially hidden by an inline style display:none. On click of another element I want to show the hidden element, then on re-click I want to hide it again. But what happens is if I put anything in the else statement it wont show or hide but if I leave the else blank it will show the element.

Also toggle(); and .is(:hidden) dont work either.

jquery version is either jQuery v1.6.4 or jQuery v1.7.1

What’s going wrong?

  //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‎&lt;/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>'
4

2 回答 2

3

利用 ：

$('#cust_select').click(function(e) {
    $('#cust_list').toggle();
});
于 2013-04-17T10:56:20.783 回答
0

尝试这个。希望它有效:)

$('#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(); 
}
});
于 2013-04-17T11:11:32.653 回答