Question

我正在尝试创建一个悬停菜单。我尝试在jquery中编写一个函数，单击该函数时，悬停菜单应向上显示。但是，这没有发生。点击功能根本不起作用。单击它，悬停菜单应该会出现。有人可以帮我解决这个问题。谢谢。

下面的我的代码：

parent

$(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;
}

Answer 1

删除显示：无内容
添加diplay：无添加选项
使用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>

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

1 个答案: