我的下拉菜单有事件队列请停止

Question

我是jquery的新手帮助我解决我的问题

我创建了一个下拉菜单但是它有一个事件队列问题请告诉我如何解决这个问题并且还有一个问题

如果有人在按钮中快速点击，那么有时候两个div下拉

但如果在按钮中快速点击一下，它只需要一个div下拉

抱歉我的英文不好

jquery的

$(document).ready(function() {
  $('.button2').click(function() {
    $('.buy-now,.About-Product,.kgn-tech').slideUp(150, function() {
      $('.Product-Image').slideDown(900, function() {
        $(".button1,.button3,.button4").css({
          "background-color": "#f5f5f5",
          "font-size": "14px",
          "border-bottom-color": "#d8d8d8",
          "color": "#666"
        });
        $(".button2").css({
          "background-color": "#ececec",
          "font-size": "15px",
          "border-bottom-color": "#ececec",
          "color": "#333333"
        });
      });
    });
  });

  $('.button3').click(function() {
    $('.buy-now,.Product-Image,.kgn-tech').slideUp(150, function() {
      $('.About-Product').slideDown(900, function() {
        $(".button2,.button1,.button4").css({
          "background-color": "#f5f5f5",
          "font-size": "14px",
          "border-bottom-color": "#d8d8d8",
          "color": "#666"
        });
        $(".button3").css({
          "background-color": "#ececec",
          "font-size": "15px",
          "border-bottom-color": "#ececec",
          "color": "#333333"
        });
      });
    });
  });

  $('.button4').click(function() {
    $('.buy-now,.Product-Image,.About-Product').slideUp(150, function() {
      $('.kgn-tech').slideDown(900, function() {
        $(".button3,.button1,.button2").css({
          "background-color": "#f5f5f5",
          "font-size": "14px",
          "border-bottom-color": "#d8d8d8",
          "color": "#666"
        });
        $(".button4").css({
          "background-color": "#ececec",
          "font-size": "15px",
          "border-bottom-color": "#ececec",
          "color": "#333333"
        });
      });
    });
  });

  $('.button1').click(function() {
    $('.kgn-tech,.Product-Image,.About-Product').slideUp(150, function() {
      $('.buy-now').slideDown(900, function() {
        $(".button4,.button2,.button3").css({
          "background-color": "#f5f5f5",
          "font-size": "14px",
          "border-bottom-color": "#d8d8d8",
          "color": "#666"
        });
        $(".button1").css({
          "background-color": "#ececec",
          "font-size": "15px",
          "border-bottom-color": "#ececec",
          "color": "#333333"
        });
      });
    });
  });
});

.button2,
.button3,
.button4 {
  width: 150px;
  height: 35px;
  border: none;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  color: #666;
  font-size: 14px;
  padding: 0 15px;
  font-weight: 700;
  line-height: 31px;
  font-family: 'Exo 2', sans-serif;
  cursor: pointer;
}

.buy-now {
  background-color: #ececec;
  width: 80%;
  height: 300px;
  border: 1px solid #d8d8d8;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(216, 216, 216);
  border-top: none;
  border-radius: 0px 5px 5px 5px;
  box-shadow: 1px 1px 3px -1px;
}

.button1 {
  width: 150px;
  height: 35px;
  border: none;
  border: 1px solid #ddd;
  background-color: #ececec;
  color: #333333;
  font-size: 15px;
  padding: 0 15px;
  font-weight: 700;
  line-height: 31px;
  font-family: 'Exo 2', sans-serif;
  border-bottom-color: #ececec;
  cursor: pointer;
}

.button1:hover {
  background-color: #ececec !important;
  font-size: 15px !important;
  color: #333333 !important;
}

.button2:hover {
  background-color: #ececec !important;
  font-size: 15px !important;
  color: #333333 !important;
}

.button3:hover {
  background-color: #ececec !important;
  font-size: 15px !important;
  color: #333333 !important;
}

.button4:hover {
  background-color: #ececec !important;
  font-size: 15px !important;
  color: #333333 !important;
}

.Product-Image {
  background-color: #ececec;
  width: 80%;
  height: 300px;
  border: 1px solid #d8d8d8;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(216, 216, 216);
  border-top: none;
  border-radius: 0px 5px 5px 5px;
  display: none;
  box-shadow: 1px 1px 3px -1px;
}

.About-Product {
  background-color: blue;
  width: 80%;
  height: 300px;
  border: 1px solid #d8d8d8;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(216, 216, 216);
  border-top: none;
  border-radius: 0px 5px 5px 5px;
  display: none;
  box-shadow: 1px 1px 3px -1px;
}

.kgn-tech {
  background-color: green;
  width: 80%;
  height: 300px;
  border: 1px solid #d8d8d8;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(216, 216, 216);
  border-top: none;
  border-radius: 0px 5px 5px 5px;
  display: none;
  box-shadow: 1px 1px 3px -1px;
}

**html**

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
  <div class="button-div-mein">
    <div class="button">
      <input type="button" class="button1" value="Buy Now" onclick="#">
      <input type="button" class="button2" value="Product Image" onclick="#">
      <input type="button" class="button3" value="About Product" onclick="#">
      <input type="button" class="button4" value="Kgn Tech" onclick="#">
    </div>
    <div class="buy-now"></div>
    <div class="Product-Image"></div>
    <div class="About-Product"></div>
    <div class="kgn-tech"></div>
  </div>
</body>
</html>

Answer 1

我重构了一些你的代码以避免代码重复。您可以阅读有关我在jQuery网站上使用的函数的更多信息。

逻辑是：

1. 当任何按钮（标签）单击时，检查它是否在动画中间。如果是，请忽略点击（我们将＆＃34;释放＆＃34;一旦动画结束，此锁定。）
2. 获取应显示data-panel属性的面板。 （有关[data-*]属性的详细信息）
3. 将active课程添加到点击按钮（在css而非代码中设置样式）并从他的所有siblings中删除。
4. slideUp :visible面板。
5. 滑动要显示的面板。
6. ＆＃34;解锁＆＃34; inAnimation旗帜。

所有这些都在下面的代码中：

＆＃13;
＆＃13;
$(document).ready(function() {
  var inAnimation = false;
  $('.button').click(function() {
    if (inAnimation) {
      return;
    }
    inAnimation = true;
    var $this = $(this),
        panelToShow = $('.' + $this.data('panel'));
    
    $this.addClass('active').siblings().removeClass('active');
    $('.panel:visible').slideUp(150, function() {
      panelToShow.slideDown(900, function() {
        inAnimation = false;
      });
    });
  });
});
＆＃13;
.button {
  width: 150px;
  height: 35px;
  border: none;
  border: 1px solid #ddd;
  background-color: #ececec;
  color: #333333;
  font-size: 15px;
  padding: 0 15px;
  font-weight: 700;
  line-height: 31px;
  font-family: 'Exo 2', sans-serif;
  border-bottom-color: #ececec;
  cursor: pointer;
}

.button:hover {
  background-color: #ececec !important;
  font-size: 15px !important;
  color: #333333 !important;
}

.button.active {
  background-color: #f5f5f5;
  font-size: 14px;
  border-bottom-color: #d8d8d8;
  color: #666;
}

.buy-now {
  background-color: #ececec;
  width: 80%;
  height: 300px;
  border: 1px solid #d8d8d8;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(216, 216, 216);
  border-top: none;
  border-radius: 0px 5px 5px 5px;
  box-shadow: 1px 1px 3px -1px;
}

.product-image {
  background-color: #ececec;
  width: 80%;
  height: 300px;
  border: 1px solid #d8d8d8;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(216, 216, 216);
  border-top: none;
  border-radius: 0px 5px 5px 5px;
  display: none;
  box-shadow: 1px 1px 3px -1px;
}

.about-product {
  background-color: blue;
  width: 80%;
  height: 300px;
  border: 1px solid #d8d8d8;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(216, 216, 216);
  border-top: none;
  border-radius: 0px 5px 5px 5px;
  display: none;
  box-shadow: 1px 1px 3px -1px;
}

.kgn-tech {
  background-color: green;
  width: 80%;
  height: 300px;
  border: 1px solid #d8d8d8;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(216, 216, 216);
  border-top: none;
  border-radius: 0px 5px 5px 5px;
  display: none;
  box-shadow: 1px 1px 3px -1px;
}
＆＃13;
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
  <div class="button-div-mein">
    <div class="buttons">
      <input type="button" class="button active" value="Buy Now" data-panel="buy-now">
      <input type="button" class="button" value="Product Image" data-panel="product-image">
      <input type="button" class="button" value="About Product" data-panel="about-product">
      <input type="button" class="button" value="Kgn Tech" data-panel="kgn-tech">
    </div>
    <div class="panel buy-now"></div>
    <div class="panel product-image"></div>
    <div class="panel about-product"></div>
    <div class="panel kgn-tech"></div>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;