скриване и показване на елемент

[efrdimitrov]

Имам следният код:

<style type="text/css">
#cities-button {
background: #fff;
    text-decoration: none;
    border: 1px solid #000;
    color: #000;
    width: auto;	
    display: block;
}
#cities {
background: #fff;
position: absolute;
left: -55%;
width: 870px;
height: 413px; overflow:auto; }
table td span { color:blue;}
table td span:hover {
cursor:pointer; text-decoration:underline; background: #afffaf;
}
</style>


<td colspan="2">
     <div style="position:relative;">
<a href="#" type="text" id="cities-button">Избери населено място</a>
         <div id="cities">
             <table name="adgrad">

<tr>
<td width="17%"><span><font color="000"><b>София</b></font></span></a></td><td width="17%"><span><font color="000"><b>Пловдив</b></font></span></a></td>
<td width="17%"><span><font color="000"><b>Варна</b></font></span></a></td><td width="15%"><span><font color="000"><b>Бургас</b></font></span></a></td>
<td width="16%"><span><font color="000"><b>Русе</b></font></span></a></td><td width="17%"><span><font color="000"><b>Стара Загора</b></font></span></a></td></tr>...
           </table>
         </div>
     </div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
    //Добавяне на input

    // заменяш #form с ид-то на формата ти
    $('<input type="hidden" name="grad" id="cityInput" />').appendTo('#adgrad');
    
    var button = $('#cities-button'),
        citiesBlock = $('#cities'),
        input = $('#cityInput'),
        hidden = true;
    
    button.click(function(e) {
        e.preventDefault();
        
        if(hidden) {
            citiesBlock.show();
        } else {
            citiesBlock.hide();
        }
        
        hidden = !hidden;
    });
            
    $('#cities tr td').click(function(e) {
        button.text($(this).text());
        citiesBlock.hide();
        hidden = !hidden;
        
        // Сменяме стойността на инпут-а който добавихме по-горе с натиснатият град
        input.val($(this).text());
        
    });
});
</script>

Когато се зареди страницата таблицата се показва, как да се скрие при презареждане.Друго, когато кликна на някъде извън таблицата пак да се скрива.И ако не е много сложно да стане без клик, а само когато мишката е върху таблицата да се показва и ако не е да се скрива.[/html]

 

[Radko]

Направи го с JQuery и постнал си в грешния подраздел във форума.