JQuery noob: Показать div на hover, нажмите, чтобы переключить отображение

Question

играл с этим в течение нескольких часов и не мог понять это.

jsFiddle example here.

В принципе, я хочу, чтобы это отображалось при наведении курсора, и щелкните по нему, чтобы переключить отображение или нет. Я думал, что это способ сделать это с display:block;, но я не могу заставить его работать.

Спасибо за любую помощь.

Answer 1

В настоящее время вы используете $(this) в .click(), но это <button> (#related-btn) не <div> (#show-hide), я думаю, что вы хотите это:

$("#related-btn").hover(function() { 
    $("#show-hide").toggle("slow"); 
}).click(function() { 
    $("#show-hide").toggle(); 
}); 

You can see an updated example here

Или если вы хотели, чтобы это было оживленным в обоих случаях, это немного короче:

$("#related-btn").bind('mouseenter mouseleave click', function() { 
    $("#show-hide").toggle("slow"); 
}); 

Или ... если вы хотите, чтобы не переключать его, но есть щелчок «контактный» это, вы можете сделать это так:

$("#related-btn").hover(function() { 
    if(!$(this).data('pinned')) 
    $("#show-hide").toggle("slow"); 
}).click(function() { 
    $(this).data('pinned', !$(this).data('pinned')); 
}); 

You can see a demo of that here