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){
    if( $(e).css('display') =="none" ) {
      $(e).css('display', '');
    } else {
      $(e).css('display', 'none');
    }
    return false;
}

Answer 4

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 5

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

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