Question

我的代码：

<html>
<head>
<title>Test Site</title>
</head>
<style>
.download-link {display: none;}
</style>
<a class="download-link">Click here</a>
<div class="g-ytsubscribe" data-channelid="UCxud25S6FNfZ2mN5ZHUg0kA" data-layout="default" data-count="hidden"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(
    function(){
  $( ".g-ytsubscribe" ).click(function() {
  $( ".download-link" ).show( "slow", function() {
    // Animation complete.
  });
});

</script>
</body>
</html>

我试图这样做，所以基本上人们只有在点击我的订阅按钮后才能看到我的下载链接，但是当我这样做时，我的订阅按钮变得不可见。

Answer 1

你的脚本有点不对，你最后用最初的方式错过了一个结束括号。然而，'show'不需要'慢'，或者它的功能混乱。 show只会设置display: block，opacity: 1和pointer-events: auto。您可能想要的是fadeIn('slow')：

$(document).ready(function(){
 $( ".g-ytsubscribe" ).click(function() {
  $( ".download-link" ).fadeIn('slow');
 });
});

除非您想要其他内容以及点击功能，否则您可以将它们视为：

$(document).ready(function(){
 $( ".g-ytsubscribe" ).click(function() {
  $( ".download-link" ).fadeIn('slow');
  // other stuff in here
 });
});

编辑：

如果是我，我的剧本如下：

$(document).ready(function(){

$( ".download-link" ).hide();

 $( ".g-ytsubscribe" ).click(function() {
  $( ".download-link" ).fadeIn('slow');
  // other stuff in here
 });
});

这样你就不需要在css中将容器设置为display：none。

修改：Working pen here

您错过了开始body标记，因此标记无效。我已经清理了标记，所以在笔中这只是你的按钮div和点击这里链接。

JQ错误，元素不隐藏

1 个答案: