cách đóng chú giải công cụ jQuery

Tôi đã cố gắng tạo chú giải javascript rất đơn giản với jQuery nhưng tôi đã nhấn vào một bức tường gạch. Ý tưởng là có ít phần tử nội dòng (span) bên trong một div. Phần tử span sẽ chứa chú giải công cụ div với một chút html (hình ảnh và liên kết). Chú giải công cụ sẽ được mở khi được nhấp vào phần tử span và đóng khi được nhấp bên ngoài hoặc bên ngoài chú giải công cụ.cách đóng chú giải công cụ jQuery

Cho đến nay, việc mở chú giải công cụ không phải là vấn đề nhưng đóng.

<!DOCTYPE HTML> 
<html> 
<head> 
    <title></title> 

    <style> 
     #colors > div { 
      background-color: red; 
      height: 50px; 
      width: 50px; 
      margin: 5px; 
     } 

     #colors > div > span { 
      min-height: 10px !important; 
      min-width: 10px !important; 
      border: 3px solid black; 
      position: relative; 
     } 

     .tooltip { 
      border: 2px solid blue; 
      display: none; 
     } 
    </style> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script> 
     $(function() { 
      // generate boxes and tooltips 
      for (var i = 0; i < 9; i++) { 
       $('#colors').append('<div id="' + i + '"><span><div class="tooltip"><a href="#">add to favorites</a></div></span></div>'); 
      } 

      $('#colors').delegate('span', 'click', function (event) { 
       $(this).children('.tooltip').css({position:'absolute', top:'5px', left:'5px'}).fadeIn(); 
       // bottom one won't work 
       //event.stopPropagation(); 
      }); 

      $(document).delegate('body', 'click', function (event) { 
       var that = this 
       $.each($('.tooltip'), function (index, element) { 
        // it's always visible ... 
        //if ($(element).is(':visible')) { 

        // doesn't work either 
        if ($(element).is(':visible') && $(element).has(event.target).length === 0) { 
         var s = event.target; 

         console.log([($(s) == event.target), event.target, index, element, $(element).has(event.target).length, that]); 
        } 
       }); 
      }); 
     }) 
    </script> 
</head> 
<body> 
<div id="colors"></div> 
</body> 
</html>

tôi dường như không thể tìm thấy một cách để đóng tooltip nếu nhấp chuột nằm ngoài span và tooltip.

Nguồn

2012-08-07 Kristian

Something như thế này sẽ làm việc tốt :)

$(document).mouseup(function (e) 
{ 
    var container = $("YOUR CONTAINER SELECTOR"); 

    if (container.has(e.target).length === 0) 
    { 
     container.hide(); 
    } 
});

Nguồn

2012-08-07 07:58:30 pkurek

Để đóng một tooltip bạn cần phải gọi

$('.tooltip').remove();

Trong kịch bản của bạn thử

$.each($('.tooltip'), function (index, element) { 
    $(this).remove(); 
});

Nguồn

2012-08-07 07:46:26

tôi điều tra vấn đề này cho trang web của riêng tôi và không tìm thấy giải pháp phù hợp nào, vì vậy tôi đã viết giải pháp của riêng mình. Trường hợp sử dụng của tôi hơi khác với OP, nhưng có thể giúp những người khác tìm kiếm cùng một cụm từ. Tôi cần một liên kết chặt chẽ mà chỉ xuất hiện trên nền tảng di động. Điều này rất hữu ích vì trên máy tính để bàn, đầu công cụ sẽ đóng khi bạn mouseout từ phần tử đích, nhưng trên nền tảng cảm ứng mà nó dính xung quanh.

// Set up tool tips for images and anchors. 
$(document).tooltip({ 
    items: "a[title], img[alt], .toolTip[title], :not(.noToolTip)", 
    track: true, 
    position: { my: "left+15 center", at: "right center" }, 
    content: function() { 
     var element = $(this); 
     var closer = closerLink = ''; 
     if (isMobile()) { 
     closer = ' <br><div onClick="$(this).parent().parent().remove();" style="color: blue; text-decoration: underline; text-align: right;">Close</div>'; 
     closerLink = ' <br>Tap link again to open it.<br><div onClick="$(this).parent().parent().remove();" style="color: blue; text-decoration: underline; text-align: right;">Close</div>'; 
     } 
     // noToolTip means NO TOOL TIP. 
     if (element.is(".noToolTip")) { 
     return null; 
     } 
     // Anchor - use title. 
     if (element.is("a[title]")) { 
     return element.attr("title") + closerLink; 
     } 
     // Image - use alt. 
     if (element.is("img[alt]")) { 
     return element.attr("alt") + closer; 
     } 
     // Any element with toolTip class - use title. 
     if (element.is(".toolTip[title]")) { 
     return element.attr("title") + closer; 
     } 
    } 
}); 

function isMobile() { 
    return (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent); 
}

Tôi đang nhắm mục tiêu ba loại điều ở đây:

thẻ neo (a) với một thuộc tính title.
Thẻ hình ảnh (img) với thuộc tính title.
Bất kỳ thành phần nào có lớp toolTip.
Và cụ thể là loại trừ bất kỳ thành phần nào có lớp noToolTip.

tôi đã viết này lên đây: JQuery UI tooltip with a close link for mobile

Nguồn

2015-06-18 13:44:25

-3

$(document).mouseup(function (kamesh) 
{ 
    var container = $("YOUR CONTAINER SELECTOR"); 

    if (container.has(kamesh.target).length === 0) 
    { 
     container.hide(); 
    } 
});

Nguồn

2016-06-09 09:31:15 kamesh

Hãy cố gắng thêm một chút thông tin cho câu trả lời của bạn. –

cách đóng chú giải công cụ jQuery

Trả lời

Các vấn đề liên quan