jQuery显示和隐藏无法正常工作

时间：2019-01-13 11:48:40

标签： jquery html css

我已经使用jquery创建了一个菜单。当我单击菜单链接时，将打开所有菜单。我试过使用show和hide类，使用后，现在什么都没有用。行为应该是当我单击第一个链接时，其他应关闭。请问有什么机构可以帮助我解决此问题。我不知道我在哪里弄错了。我什至没有在浏览器中收到控制台错误

下面的我的代码

$(document).ready(function () {
      $(".image-container").click(function () {
        $(".dropup").slideToggle().delay(2000);
      });
    });
   .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 show">
        <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 class="column text-center image-container">
        <img src="./images/aoe_icons_webportal.png" width='69' height='61' alt="web portals">
        <p class="mt-2 text-custom">Web Portals</p>
      </div>
      <div class="dropup show">
        <div class="dropup-content">
          <div class="header">
            <h2>Mega Menu</h2>
          </div>
          <div class="row">
            <div class="col-lg-8">
              <h3>Category 1</h3>
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
            <div class="col-lg-4">
              <h3>Category 2</h3>
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </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>

2 个答案:

答案 0 :(得分：1)

在这里，我已经修改了您的代码，请检查并告诉我是否要这样做。

$(document).ready(function() {
  $("#section-1").click(function() {
    $("#drop-1").slideToggle();
  });
  $("#section-2").click(function() {
    $("#drop-2").slideToggle();
  });
});
.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;
}
<body>
  <div class="container application-container">
    <div class="row seven-rows">
      <div class="column text-center image-container" style="background-color: red" id="section-1">
        <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 show" id="drop-1">
        <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 class="column text-center image-container" id="section-2">
        <img src="./images/aoe_icons_webportal.png" width='69' height='61' alt="web portals">
        <p class="mt-2 text-custom">Web Portals</p>
      </div>
      <div class="dropup show" id="drop-2">
        <div class="dropup-content">
          <div class="header">
            <h2>Mega Menu</h2>
          </div>
          <div class="row">
            <div class="col-lg-8">
              <h3>Category 1</h3>
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
            <div class="col-lg-4">
              <h3>Category 2</h3>
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

答案 1 :(得分：1)

如果您希望第一项在页面加载时可见，则将类 show 添加到第一个下拉菜单中：<div class="dropup show">。如果您希望两个下拉菜单都不可见，除非单击<image-container>，请执行：<div class="dropup">：

希望我能很好地理解您的需求，这就是您所需要的：

$(document).ready(function () {
      $(".image-container").on('click', function () {
        var delayTime = 250;
        var $dropup = $(this).next(".dropup");
        if($dropup.is(':visible')){
          $dropup.delay(delayTime).slideUp(200);
        } else {
          $dropup.delay(delayTime).slideDown(200);
        }
        $(".dropup").hide();
      });
    });
.application-container{
    position: relative;
  }
/* The dropup container */
.dropup{
  float: left;
  overflow: hidden;
  position: initial;
  display: none;
}

.dropup.show {
  display: block;
}

/* 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="http://lorempixel.com/69/61/" width='69' height='61' alt="e-commerce">
        <p class="mt-2 text-custom">E Commerce</p>
      </div>
      <div class="dropup show">
        <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 class="column text-center image-container">
        <img src="http://lorempixel.com/69/61/" width='69' height='61' alt="web portals">
        <p class="mt-2 text-custom">Web Portals</p>
      </div>
      <div class="dropup">
        <div class="dropup-content">
          <div class="header">
            <h2>Mega Menu</h2>
          </div>
          <div class="row">
            <div class="col-lg-8">
              <h3>Category 1</h3>
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
            <div class="col-lg-4">
              <h3>Category 2</h3>
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </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>

相关问题
最新问题