Question

当我点击“打开”按钮时，它会淡出，但“navigazione”div不会淡入。但是如果我尝试将display：block;在“navigazione ID”我可以看到脚本工作。显然我需要“navigazione id”以display none开头。问题出在哪里？提前谢谢你的帮助！

JS

<script>
$(document).ready(function(e) {
  $("#close-icon").on('click', function() {
    $("#menu-butt").fadeIn();
    $("#navigazione").fadeOut();
});

$("#menu-butt").on('click', function() {
    $("#menu-butt").fadeOut();
    $("#navigazione").fadeIn();
});
});
</script>

HTML

 <div id="navigazione"> <div> <div id="button"> ciao </div> </div> 
  <div class="row menu-butt"><a href="#" id="menu-butt">open<a></div>
  <div id="close-icon"><a href="#" id="close-icon">close<a></div>

CSS

#navigazione { height: 100vh;
width:100%;
position: fixed  ;
top: 0px;
left: 0px; 
background-color: rgba(28,82,23,0.95);
z-index:400; 
display: none;
}

#close-icon{ position: fixed;
height: cover;
top: 20px; 
right: 30px !important;
z-index: 450 ;
display: none;

}

Answer 1

这是你在寻找 -

    $(document).ready(function(e) {
      $("#close-icon").on('click', function() {
        $("#menu-butt").fadeIn();
        $("#navigazione").fadeOut();
    });
    
    $("#menu-butt").on('click', function() {
        $("#menu-butt").fadeOut();
        $("#navigazione").fadeIn();
    });
    });

  #navigazione { height: 100vh;
    width:100%;
    position: fixed  ;
    top: 0px;
    left: 0px; 
    background-color: rgba(28,82,23,0.95);
    z-index:400; 
    display: none;
    }
    
    #close-icon{ position: fixed;
    height: cover;
    top: 20px; 
    right: 30px !important;
    z-index: 450 ;
    
    }
    
    close-icon {
    color:#000;  
    }
    .menu-butt {
    color:#000;  
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigazione"> <div id="button"> ciao </div> </div>
<div class="row menu-butt"><a href="#" id="menu-butt">open</a></div>
<div id="close-icon"><a href="#" id="close-icon">close</a></div>

点击淡出不起作用

1 个答案: