Jquery клик и парение и показать / скрыть странность функции

Question

Мне нужно добавить мини-всплывающую подсказку на мою страницу и, по странным причинам, я не могу использовать всплывающую подсказку, предоставляемую jquery, поэтому я просто собираюсь создать свою собственную - за исключением того, что она не работает! Вот простой код:

$('#nav-about a').click(function(){
     showTooltip('#tooltip-about')
}).hover(function(){
     showTooltip('#tooltip-about')
});

а также

function showTooltip(e){
    if( $(e).css('display') =="none" ) {
      $(e).show();
    } else {
      $(e).hide();
    }
    return false;
}

Если я наведите курсор, появится всплывающая подсказка. но, если я нажму, он будет скрыт. По сути, когда я щелкаю, он читает css("дисплей") как скрытый, а не как блок. Идеи почему?? Единственная причина, по которой я это делаю, это дисплей iPad. Большинство пользователей должны видеть подсказку по опрокидыванию, а пользователи iPad - нет. Другие решения приветствуются!!!

Спасибо!

ОБНОВЛЕНИЕ: вот что сработало. Я неправильно понял мою логику:). Мне просто нужно было перейти на userAgent вместо того, чтобы пытаться обрабатывать две вещи одновременно.

var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad){
   $('#nav-about a').click(function(){
    showTooltip('#tooltip-about')
   })
}else{
   $('#nav-about a').hover(function(){
    showTooltip('#tooltip-about')
   });
}

Answer 1

Вы могли бы уменьшить тело вашего showTooltip() функция к...

function showTooltip(e){
    $(e).toggle();
}

Вы также можете потерять $() перенос, если вы уверены, что объект jQuery всегда будет передан. Тем не менее, это не повредит, чтобы обернуть его снова, и это дает вам гибкость передачи селектора или собственного элемента DOM.

Документация

Кроме того, для явной проверки, скрыт ли элемент, вы можете использовать...

element.is(':hidden')

Документация

Имейте в виду, что элементы с visibility: hidden или же opacity: 0 считаются видимыми этим селектором.

Answer 2

Проблема в том, что вы не можете щелкнуть, не наведя курсор на элемент. Таким образом, всплывающая подсказка отображается событием при наведении, а событие щелчка закрывает ее.

Вам понадобится какой-то способ определить, использует ли пользователь устройство, позволяющее ему зависать и связывать только соответствующие события.

Вы, вероятно, можете использовать что-то похожее на это:

function isiPhone(){
    return (
        (navigator.platform.indexOf("iPhone") != -1) ||
        (navigator.platform.indexOf("iPod") != -1) ||
        (navigator.platform.indexOf("iPad") != -1)
    );
}

if (isiPhone()) {
    $('#nav-about a').click(showTooltip)
else 
    $('#nav-about a').hover(showTooltip)

function showTooltip(e) {
    e.preventDefault();
    $('#tooltip-about').toggle();
}

Answer 3

function showTooltip(e){
    $(e).is(':hidden') ? $(e).show() : $(e).hide();
    return false;
}

$('#nav-about a').hover(
    function(){
        showTooltip('#tooltip-about');
    },
    function(){
       showTooltip('#tooltip-about');
    }
);

Answer 4

Почему вы не используете класс переключения из jquery? например: http://api.jquery.com/toggle/

('#tooltip-about').toggle();

Answer 5

Попробуй это:

function showTooltip(e){
    if( $(e).css('display') =="none" ) {
      $(e).css('display', '');
    } else {
      $(e).css('display', 'none');
    }
    return false;
}