当我单击悬停菜单时，jquery 向上滑动功能不起作用

Question

I'm trying to create a hoverup menu. I tried writing a function in jquery, that on click of it, the hover menu should appear upwards. But, it's not happening. The click function is not working at all. on click of it, the hover menu should come out. Will somebody help me to troubleshoot this issue. Thank You.

My Code Below:

 $(document).ready(function () { $(".image-container").click(function(){ $(".dropup").fadeIn(); }); });

 .application-container{ position: relative; } /* The dropup container */ .dropup{ float: left; overflow: hidden; position: initial; display:none; } /* Dropup content (hidden by default) */ .dropup-content { width:100%; bottom:-100%; left:0%; position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: -1; }

 <div class="container application-container"> <div class="row seven-rows"> <div class="column text-center image-container"> <img src="./images/aoe_icons_services_order_management.png" width='69' height='61' alt="e-commerce"> <p class="mt-2 text-custom">E Commerce</p> </div> <div class="dropup"> <div class="dropup-content pt-4 pb-4"> <div class="row"> <div class="col-lg-8 ml-5"> <h3> Innovative Omnichannel E-Commerce Solutions</h3> <p>AOE develops flexible and high-performance Enterprise E-Commerce portals. Our solutions digitize business processes and create efficient, profitable platforms for providers and customers.</p> <a class="btn btn-custom">E Commerce Solutions</a> </div> <div class="col-lg-4"> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

Answer 1

• Remove display:none from content
• Add diplay:none to dropup
• Use fadeIn

 $(document).ready(function () { $(".image-container").click(function(){ $(".dropup").fadeIn(); }); });

 .application-container{ position: relative; } /* The dropup container */ .dropup{ float: left; overflow: hidden; position: initial; display:none } /* Dropup content (hidden by default) */ .dropup-content { width:100%; bottom:-100%; left:0%; position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: -1; }

 <div class="container application-container"> <div class="row seven-rows"> <div class="column text-center image-container"> <img src="./images/aoe_icons_services_order_management.png" width='69' height='61' alt="e-commerce"> <p class="mt-2 text-custom">E Commerce</p> </div> <div class="dropup"> <div class="dropup-content pt-4 pb-4"> <div class="row"> <div class="col-lg-8 ml-5"> <h3> Innovative Omnichannel E-Commerce Solutions</h3> <p>AOE develops flexible and high-performance Enterprise E-Commerce portals. Our solutions digitize business processes and create efficient, profitable platforms for providers and customers.</p> <a class="btn btn-custom">E Commerce Solutions</a> </div> <div class="col-lg-4"> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>