我试图用js构建一个js Select 框,因为它包含了图片,所以我必须使用js.问题是,当我点击"输入框"时,我做了jQuery代码来打开它,即.
$('#ratingDropdownContainer').on('click', function() {
if ($('#dropdownListContainer').css('display') == 'none') {
$('#dropdownListContainer').show();
}
})
没有问题.但是当用户 Select 其中一个选项时,. hide()将无法工作.在线风格
style="display: block;"
当我改变的时候,
$('#dropdownListContainer').hide();
我试过很多事情,比如:确保它被包装在$(document).ready(function()
中,判断js是否识别出它的显示是块(就像下面代码中看到的console.log("okokoko");
打印一样),我确保我的jQuery在我的js文件之前被加载,我试过使用vanilla js,但是没有一个工作,我不明白为什么.show()
工作而.hide()
工作.任何帮助将不胜感激.
谢谢
js:
$('#ratingDropdownContainer').on('click', function() {
if ($('.dropdown-list-container').css('display') == 'none') {
$('.dropdown-list-container').show();
}
})
$('.avg-rating-select').on('click', function() {
var selectedRatingImg = $(this).find('img').prop('outerHTML');
var selectedRatingText = $(this).find('p').prop('outerHTML');
var newDiv = $("<div>" + selectedRatingImg + selectedRatingText + "</div>");
newDiv.addClass("rating-selected-container");
if ($('.rating-selected-container').length) {
$('.rating-selected-container').replaceWith(newDiv);
} else {
$('.rating-dropdown-inner-text p').replaceWith(newDiv);
}
if ($('.dropdown-list-container').css('display') === 'block') {
console.log("okokoko");
$('.dropdown-list-container').hide();
}
})
Html:
<div class="col">
<div class="rating-dropdown-container" id="ratingDropdownContainer">
<div class="rating-dropdown-inner-text">
<p>Average Rating...</p>
<i class="bi bi-caret-down-fill"></i>
</div>
<div class="dropdown-list-container" id="dropdownListContainer">
<ul class="rating-dropdown">
<li class="avg-rating-select">
<img src="/media/main/5stars.png" alt="5stars" class="avg-rating-select-img">
<p class="avg-rating-select-text">5 Stars & Up</p>
</li>
<li class="avg-rating-select">
<img src="/media/main/4stars.png" alt="4stars" class="avg-rating-select-img">
<p class="avg-rating-select-text">4 Stars & Up</p>
</li>
<li class="avg-rating-select">
<img src="/media/main/3stars.png" alt="3stars" class="avg-rating-select-img">
<p class="avg-rating-select-text">3 Stars & Up</p>
</li>
<li class="avg-rating-select">
<img src="/media/main/2stars.png" alt="2stars" class="avg-rating-select-img">
<p class="avg-rating-select-text">2 Stars & Up</p>
</li>
<li class="avg-rating-select">
<img src="/media/main/1stars.png" alt="1stars" class="avg-rating-select-img">
<p class="avg-rating-select-text">1 Star & Up</p>
</li>
</ul>
</div>
</div>
</div>
另请参阅以下内容:
.rating-dropdown-container {
display: block;
position: relative;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: .375rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.dropdown-list-container {
display: none;
position: absolute;
z-index: 100;
border: 1px solid #ced4da;
border-top:none;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: .375rem;
border-bottom-right-radius: .375rem;
width: 100%;
margin-left:-12px;
background-color: #fff;
}
.avg-rating-select {
padding-left: 8px;
display: flex;
align-items: center;
cursor: pointer;
}
(注意:这是一个Django项目,如果有帮助的话,它使用了 bootstrap )