jQuery檢查attr取決于特定區域

我對在 mouseenter 和 mouseleave 事件上顯示和隱藏彈出視窗有疑問。問題的 HTML 部分：

<div id=\"social-wrapper\">
 
  <input type=\"checkbox\" class=\"checkbox\" id=\"share\" />
  <label for=\"share\" class=\"label entypo-export\"><span>share</span></label>
  <div class=\"social\">

    <ul>
      <li>
         <img id=\"linkdln\" src=\"{$linkdln}\" />
      </li>
      <li>
         <img id=\"facebook\" src=\"{$facebook}\" />
      </li>
      <li>
         <img id=\"twitter\" src=\"{$twitter}\" />
      </li>
      <li>
         <img id=\"copy\" src=\"{$copy}\" />
      </li>   
    </ul>

</div>         
</div>

前端

jQuery部分

var CHECKBOX = jQuery('input#share');
var mouse_is_inside = false

jQuery('.label').on({
  mouseenter: function () {
    mouse_is_inside = true;
    //$(CHECKBOX).prop("checked", true).trigger("change");
   // console.log('entering!');
  },
  mouseleave: function () {
   // $(CHECKBOX).prop("checked", false).trigger("change");
   // console.log('outside now!');
   mouse_is_inside = false;
  }  
});

我希望當用戶懸停共享按鈕以打開彈出視窗時，這很容易，我做到了。但問題不是隱藏它。應該在 mouseleave 上，但是如果用戶離開共享按鈕將蜂巢并且用戶將沒有機會選擇社交媒體，所以我需要設定隱藏它的良好條件。

如果有人可以提供幫助將不勝感激！

uj5u.com熱心網友回復：

您可以使用 CSS 來顯示/隱藏社交分享按鈕。

#social-wrapper:hover .social {
    visibility: visible;
    opacity: 1;
    position: relative;
}
#social-wrapper .social {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: -30px;
} 

uj5u.com熱心網友回復：

考慮以下使用.hover().

$(function() {
  $(".label").hover(function() {
    $(this).parent().find(".social").show();
    $(this).parent().find("#share").prop("checked", true);
  }, function() {
    if (!$("#share").is(":checked")) {
      $(this).parent().find(".social").hide();
    }
  });
  
  $("body:not('#social-wrapper img')").click(function() {
    if ($("#share").is(":checked")) {
      console.log("Close Social");
      $("#social-wrapper .social").hide();
      $("#share").prop("checked", false);
    }
  });
  
  $("#social-wrapper img").click(function() {
    if ($("#share").is(":checked")) {
      console.log("Social Share");
      $("#social-wrapper .social").hide();
      $("#share").prop("checked", false);
      // Perform action
    }
  });
})

#social-wrapper {
  width: 340px;
  margin: 20px auto;
}

#social-wrapper input[type='checkbox'] {
  display: none;
  font-family: Arial, sans-serif;
}

#social-wrapper .label {
  padding: 10px;
  background: #222;
  color: #eee;
  margin-left: 60px;
}

#social-wrapper .social {
  position: relative;
  display: none;
}

#social-wrapper ul {
  list-style: none;
  padding: 10px;
  background: #222;
  width: 180px;
  margin-top: 18px;
}

#social-wrapper ul:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #222;
  position: absolute;
  top: -10px;
  left: 85px;
}

#social-wrapper ul li {
  display: inline-block;
}

#social-wrapper ul li img {
  width: 40px;
  height: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="social-wrapper">
  <input type="checkbox" class="checkbox" id="share" />
  <label for="share" class="label entypo-export"><span>Share</span></label>
  <div class="social">
    <ul>
      <li>
        <img id="linkdln" src="{$linkdln}" />
      </li>
      <li>
        <img id="facebook" src="{$facebook}" />
      </li>
      <li>
        <img id="twitter" src="{$twitter}" />
      </li>
      <li>
        <img id="copy" src="{$copy}" />
      </li>
    </ul>
  </div>
</div>

Hover 具有 In 和 Out 功能。這允許顯示共享選項，然后可以通過單擊或其他活動隱藏。

標籤：javascriptphpjQueryWordPressjQuery-ui

上一篇：如何重寫除一個特定URI之外的所有請求

下一篇：即使遵循相同的腳本，日期選擇器也不起作用