BootStrap은 클릭 영역 숨기기 기능을 구현합니다.

이번에는 클릭 영역 숨기기 기능을 구현하기 위해 BootStrap을 가져오겠습니다. BootStrap에서 클릭 영역 숨기기 기능을 구현하려면 어떤 주의 사항이 있나요?

부트스트랩을 사용하다 보면 어딘가에 도움말 버튼을 추가해야 하는 경우가 종종 있는데, 마우스를 클릭하거나 마우스를 올리면 도움말 메시지가 뜨는데, BT에서 제공하는 방법이 없는 것 같습니다. 부트스트랩에 대해 알고 계시다면 메시지를 남겨주세요. 코드는 다음과 같습니다

이전 버튼은 pop으로 정의되어야 합니다.

$(function(){
    $(".pop").popover({placement:'right', trigger:'manual', delay: {show: 10, hide: 10}, html: true,
      title: function () {
        return $("#src-title").html();
      },
      content: function () {
       return $("#data-content").html(); // 把content变成html
      }});
    $('body').click(function (event) {
      var target = $(event.target);    // 判断自己当前点击的内容
      if (!target.hasClass('popover')
          && !target.hasClass('pop')
          && !target.hasClass('popover-content')
          && !target.hasClass('popover-title')
          && !target.hasClass('arrow')) {
        $('.pop').popover('hide');   // 当点击body的非弹出框相关的内容的时候，关闭所有popover
      }
    });
    $(".pop").click(function (event) {
      $('.pop').popover('hide');     // 当点击一个按钮的时候把其他的所有内容先关闭。
      $(this).popover('toggle');     // 然后只把自己打开。
    });
  });

이 기사의 사례를 읽으신 후 방법을 익히셨을 것입니다. 더 흥미로운 콘텐츠를 보려면 Bootstrap 튜토리얼에 주목하세요!

추천 자료:

vue.js 원활한 스크롤 효과를 얻기 위한 세부 단계

D3.js를 사용하여 물류 지도를 만드는 세부 단계

JS 코딩 표준은 무엇입니까

위 내용은 BootStrap은 클릭 영역 숨기기 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!