BootStrap implementiert die Funktion zum Ausblenden des Klickbereichs

Dieses Mal bringe ich Ihnen BootStrap, um die Funktion zum Ausblenden des Klickbereichs zu implementieren. Was sind die Vorsichtsmaßnahmen für BootStrap, um die Funktion zum Ausblenden des Klickbereichs zu implementieren?

Bei der Verwendung von Bootstrap müssen Sie häufig irgendwo eine Hilfeschaltfläche hinzufügen. Wenn Sie mit der Maus darauf klicken, wird jedoch anscheinend keine Hilfemeldung angezeigt Der Meister kennt sich mit Bootstrap aus. Wenn Sie welche haben, können Sie eine Nachricht hinterlassen. Ich habe daraus gelernt: Der Code lautet wie folgt

Die vorherige Schaltfläche muss als Pop definiert werden. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte achten Sie bitte auf den

$(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');     // 然后只把自己打开。
    });
  });

! Empfohlene Lektüre:

Detaillierte Erklärung der Schritte, um mit vue.js einen nahtlosen Scrolleffekt zu erzielen

Erstellt mit D3 .js Detaillierte Erläuterung der Schritte der Logistikkarte

Was sind die JS-Codierungsstandards

Das obige ist der detaillierte Inhalt vonBootStrap implementiert die Funktion zum Ausblenden des Klickbereichs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!