0
次の問題は、一番下のボタンをクリックしてもドロップダウンメニューがトップボタンdivに追加されることです。 https://jsfiddle.net/dy0m1frs/jQuery関数が動作しない：同じクラスの異なる要素を選択する
$(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();
}
});
});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;<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>jQueryのに新しい、私はこの問題は、クラス=「customDropdown」で、デフォルトでは最初の項目createDropdown機能は、クリックイベントの前に呼び出されていることであり、そのうと思ったが、常に使用してください。だから私は変数dropを可変的に再定義しようとしましたが、clickイベントの中で関数を呼び出すのは無駄でした。どんな助け？
は、例えば私が試した：
$('.customDropdown').on('click', function(event){
var drop = $('.customDropdown').prev();
createDropdown();
var container = $('#dropContainer');
var target = $(event.target);
これはので、私はそれが動作します単なるデモです。私は同じメニューを表示する必要がある同じクラスの無限のボタンを持つことができます。これを念頭に置いて、実際にdivクラスに別の属性を追加する必要がありますか？
https://jsfiddle.net/cr7g5oxh/ – dfsq
歓声。あなたは何を変えましたか？ – user1849962
ああ、私は参照してください。おかげでたくさん – user1849962