javascript - 我的下拉菜单有事件队列，请停止它

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. 当点击任何按钮(选项卡)时，检查它是否处于动画中间。如果是这样，请忽略单击(动画结束后我们将“释放”此锁定)。
2. 从 data-panel 属性获取应显示的面板。 (有关 [data-*] 属性的更多信息)
3. 将 active 类添加到单击的按钮(在 css 中设置样式，而不是在代码中)并从他的所有 siblings 中删除.
4. 向上滑动 :visible面板。
5. 向下滑动您要显示的面板。
6. “解锁”inAnimation 标志。

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

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

.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;
}

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