jquery slide up function is not working when I click on the hover menu

问题: 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 fun...

问题:

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>


回答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>

  • 发表于 2019-01-16 05:33
  • 阅读 ( 211 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除