jquery - 바깥 쪽을 클릭하면 여러 div가 숨김

편지를 클릭 한 후 풍선에 대한 자세한 정보가있는 풍선을 표시하거나 숨기고 싶었던 alphabeth 테이블이 있습니다. 나는 JQuery와 완전히 새로운 해요하지만 난이 적어 관리했습니다 :jquery - 바깥 쪽을 클릭하면 여러 div가 숨김

JS :

function toggle(id) { 
    $('#' + id).slideToggle(); 
}

HTML :

<td> 
    <a href="javascript:toggle('a')" onmouseover="this.innerHTML='A'" onmouseout="this.innerHTML='あ'">あ</a> 
    <div id="a" class="bubble_table"> 
     <a href=""><div class="img_table"></div></a><p>[a], a </p> 
    </div> 
</td>

을 그리고 그것은 잘 작동하지만 지금 내가하고 싶습니다 페이지의 다른 곳을 클릭하면 숨기고있는 거품과 나는 막혔다. 누군가가 이것을 어떻게 편집/재 작성하는 방법을 보여 주시겠습니까? 아마도 가장 간단한 방법일까요? 많은, 에바

출처

2013-08-05 Eva

모든 거품에는 class bubble_table이 있습니까? –

시도가 다음

감사합니다 :

$(document).mouseup(function (e) 
    { 
     var container = $(".bubble_table"); 
     if (container.has(e.target).length === 0) 
     { 
      container.hide();     
     } 
    });

나는 그것이 도움이되기를 바랍니다.

출처

2013-08-05 07:19:58 maverickosama92

인라인 이벤트는 피해야합니다. 그런 식으로 이벤트를 묶지 마십시오. 작업을 완료하려면 javascript 또는 jQuery를 사용하십시오. 앵커 요소에 클래스를 추가했습니다. 그리고 텍스트를 저장하는 것은 HTML-5 데이터 -에 표시 할 * HTML

<tr> 
    <td> <a href="" data-before="あ" data-after="A" class="bubble">あ</a> 

     <div id="a" class="bubble_table"> <a href=""><div class="img_table"></div></a> 

      <p>[a], a</p> 
     </div> 
    </td> 
    <td> <a href="" data-before="あ" data-after="B" class="bubble">あ</a> 

     <div id="b" class="bubble_table"> <a href=""><div class="img_table"></div></a> 

      <p>[b], b</p> 
     </div> 
    </td> 
    <td> <a href="" data-before="あ" data-after="C" class="bubble">あ</a> 

     <div id="c" class="bubble_table"> <a href=""><div class="img_table"></div></a> 

      <p>[c], c</p> 
     </div> 
    </td> 
</tr>

자바 스크립트

$(document).on('click', function(e) { 
    e.preventDefault(); 
    var $this = $(e.target); 
    if($this.closest('td').length) { 
     if($this.hasClass('bubble')) { 
      var $currBubble = $this.next('.bubble_table') 
      $currBubble.slideToggle(); 
      $('.bubble_table').not($currBubble).slideUp(); 
     } 
    } 
    else { 
     $('.bubble_table').slideUp(); 
    } 
}); 

$('.bubble').on({ 
    mouseover : function() { 
     $(this).text(function(_,txt) { 
      return $(this).data('after'); 
     }); 
    }, 
    mouseout: function() { 
     $(this).text(function(_,txt) { 
      return $(this).data('before'); 
     }); 
    } 

});

Check Fiddle

출처

2013-08-05 07:26:34

href는 비워 둘 수 없습니다. –

@ABFORCE. 당신은 그렇게 생각하니 .. 비어있을 수 있습니다. –

html5 유효성 확인 –

속성

나는 단순함 때문에 maverickosama92의 기능을 사용했고 멋진 시각적 효과 때문에 Sushanth가 제안한 ". 숨김"을 ".slideUp"로 대체했습니다. 여러분 모두에게 감사합니다 :-)

출처

2013-08-05 07:45:00 Eva

jquery - 바깥 쪽을 클릭하면 여러 div가 숨김

답변

관련 문제