Question

基本上是代码的样子，如果粘贴在sublime中它应该运行，我试图做的是在页面加载时显示div然后在滚动时隐藏但是当点击按钮时它应该显示在页面上的任何位置。代码有点粗糙，但它只是一个测试页

＆＃13;

 $(window).scroll(function() {
    
        if ($(this).scrollTop()>0)
         {
            $('.fade').fadeOut();
         }
        else
         {
          $('.fade').fadeIn();
         }
     });
 
 $(function(){
        $(".box").click(function(){
          $(this).find(".fade").fadeIn();
        }
                        ,function(){
                            $(this).find(".fade").fadeOut();
                        }
                       );        
    });
 
 window.onscroll = function()
    {
        var left = document.getElementById("left");
    
    
    
        if (left.scrollTop < 60 || self.pageYOffset < 60) {
            left.style.position = 'fixed';
            left.style.top = '60px';
        } else if (left.scrollTop > 60 || self.pageYOffset > 60) {
            left.style.position = 'absolute';
            left.style.margin-top = '200px';
        }
    
    }

＆＃13;

body {
  height: 2000px;    
}
.fade {
  height: 300px;
  width: 300px;
  background-color: #d15757;
  color: #fff;
  padding: 10px;
}
    
    
.box{color: red;}
    
#left{
  float: left;
  width: 20%;
  height: 200px;
  background: yellow;
  position: fixed;
  top: 0;
  left: 150px;
}

＆＃13;

<div class="box">
<div class="fade" id="left">
    show div / hide on click (NOT HOVER)
</div>
    
<br><br><br><br><br><br><br><br><br><br><br><br>
<div style="margin-left: 90% !important;">
<button style="    position: fixed;
        /* margin-right: -40% !important; */
        margin-top: 0%;
        background-color: red;
        color: #fff;
        padding: 10px 10px;
        display: block;
        width: 54%;
        float: right;
        top: 0;">show div again</button></div>
</div>
  
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'>

＆＃13;

Answer 1

您可以使用toggle，因为您需要点击fadeIn和fadeOut点击

替换hover

 $(function(){
        $(".box").hover(function(){
          $(this).find(".fade").fadeIn();
        },function(){
           $(this).find(".fade").fadeOut();
        }
        );        
 });

使用toggle

 $(function(){
        $(".box").toggle(function(){
          $(this).find(".fade").fadeIn();
        },function(){
           $(this).find(".fade").fadeOut();
        }
        );        
 });

Answer 2

这可行。如果单击框，请检查.fade元素是否已显示。如果是，则隐藏它，如果没有，则显示它。

$(".box").click(function(){
    if($(".fade", this).is(":visible"))
    {
        $(".fade", this).fadeOut();
    }
    else
    {
        $(".fade", this).fadeIn();
    }
});

Answer 3

快速查看文档会让您头疼：http://api.jquery.com/click

Answer 4

它没有理由 - 你动态创建按钮，因为你需要用.live（）方法调用它们，如果你使用jquery 1.7

但不推荐使用此方法（您可以在此处看到所有已弃用的方法的列表）。如果你想使用jquery 1.10或更高版本，你需要以这种方式调用你的按钮：

$(document).on('click', 'selector', function(){ 
     // Your Code
});

您的代码将是这样的。

$(document).on('click', '.box', function(){
     $(this).find(".fade").fadeIn();
 },function(){
     $(this).find(".fade").fadeOut();
 });

悬停效果点击

4 个答案: