制作点击按钮触发浮层

1.做到点击按钮开启浮层

$("#favorite").on('click', function() {
    $("#popover").show()
})

2.做到点击按钮开启浮层,再次点击关闭浮层

$("#favorite").on('click', function() {
  if (popover.style.display == 'block') {
    $("#popover").hide()
  } else {
    $("#popover").show()
  }
})

3.做到点击别处关闭浮层

function listenToDocument() {
  $(document).on('click', function(e) {
    if (e.target === $('html')[0]) {
      $popover.hide()
        // 只在浮层出现时监听,节约资源
      $(document).off('click', arguments.callee)
    }
  })
}

4.最终做到
-点击按钮弹出浮层
-点击别处关闭浮层
-点击浮层时,浮层不得关闭
-再次点击按钮,浮层消失点击按钮弹出浮层

最终代码

let $favorite = $("#favorite")
let $popover = $("#popover")

$favorite.on('click', function(e) {
  if (popover.style.display == 'block') {
    $popover.hide()
  } else {
    $popover.show()
    listenToDocument()
  }
})

function listenToDocument() {
  $(document).on('click', function(e) {
    if (e.target === $('html')[0]) {
      $popover.hide()
        // 只在浮层出现时监听,节约资源
      $(document).off('click', arguments.callee)
    }
  })
}

以下为HTML





  
  
  JS Bin



  



css

* {
  margin: 0;
  padding: 0;
}
.navbar {
  position: relative;
  display: inline-block;
  left: 100px;
  top: 100px;
}
.popover {
  position: absolute;
  border: 1px solid black;
  left: 0;
  top: 100%;
  white-space: nowrap;
  display: none;
}
ul li {
  list-style-type: none;
  margin: 5px;
}
li:hover {
  background-color: #e5dbdb;
}

你可能感兴趣的:(制作点击按钮触发浮层)