Question

以下问题是，即使单击底部按钮，下拉菜单也会附加到顶部按钮div。 https://jsfiddle.net/dy0m1frs/

＆＃13;

$(document).ready(function() {
  function createDropdown() {
    var drop = $('.customDropdown');
    var i;
    var htmlString = '<div id="dropContainer">';

    for (i = 0; i < 20; i += 1) {
      htmlString += '<div class="dropOption">option ' + i + '</div>';
    }

    htmlString += '</div>';
    drop.append(htmlString);
  }

  createDropdown();



  $('.customDropdown').on('click', function(event) {
    var container = $('#dropContainer');
    var target = $(event.target);

    if (target.hasClass('valueHolder') || target.hasClass('customDropdown')) {
      container.show();
    } else if (target.hasClass('dropOption')) {
      drop.find('span.valueHolder').text(target.text());
      container.hide();
    }



  });
});

＆＃13;

body {
  background-color: #4E4E4E;
}
.customDropdown {
  position: relative;
  cursor: pointer;
  left: 50%;
  top: 50%;
}
#dropContainer {
  position: absolute;
  top: 20px;
  left: -1px;
  overflow-y: auto;
  max-height: 250px;
  width: 192px;
  background-color: white;
  display: none;
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
}
.btn {
  -moz-box-shadow: inset 0px 0px 0px -1px #ffffff;
  -webkit-box-shadow: inset 0px 0px 0px -1px #ffffff;
  box-shadow: inset 0px 0px 0px -1px #ffffff;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
  background: -moz-linear-gradient(center top, #f9f9f9 5%, #e9e9e9 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
  background-color: #f9f9f9;
  -webkit-border-top-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-radius-bottomright: 0px;
  border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  border-bottom-left-radius: 0px;
  text-indent: -4.066px;
  border: 2px solid #dcdcdc;
  display: inline-block;
  color: #666666;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  font-style: normal;
  height: 17px;
  line-height: 17px;
  width: 106px;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px 6px #ffffff;
}
.btn:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
  background: -moz-linear-gradient(center top, #e9e9e9 5%, #f9f9f9 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');
  background-color: #e9e9e9;
}
.btn:active {
  position: relative;
  top: 1px;

＆＃13;

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="customDropdown">
    <span class="valueHolder btn">Select</span>
  </div>
  <br>
  <br>
  <div class="customDropdown">
    <span class="valueHolder btn">Select</span>
  </div>

</body>

＆＃13;

虽然jQuery是新手，但我认为问题是在点击事件之前调用createDropdown函数，默认情况下，类中的第一项=＆＃34; customDropdown＆＃34;将永远使用。所以我尝试以可变方式重新定义变量drop并在click事件中调用函数但无济于事。有什么帮助吗？

例如我试过：

 $('.customDropdown').on('click', function(event){

        var drop = $('.customDropdown').prev();
        createDropdown();
        var container = $('#dropContainer');
        var target = $(event.target);

这只是一个演示，所以我让它工作;可能我可以有同一类的无限按钮，需要显示相同的菜单;考虑到这一点，我是否需要在div类中添加另一个属性？

Answer 1

你遇到了很多问题。首先，您要为每个按钮添加一个具有相同ID的div。将其更改为班级：

var htmlString = '<div class="dropContainer">';

然后，在您的点击处理程序中，您需要找到附加到您单击的按钮的特定div：

var container = $(this).find('.dropContainer');

然后，在else if条件中，drop变量不可用，因为它在另一个函数中定义。您需要找到正确的范围：

$(this).find('span.valueHolder').text(target.text());

最后，在你的css中，将#dropContainer声明更改为.dropContainer。

你仍然需要做一些CSS工作，因为第二个按钮总是会显示第一个按钮的选项。

https://jsfiddle.net/dy0m1frs/5/

jQuery函数不起作用：在同一个类

1 个答案: