<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technology closedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
我有 class="listing-main"
列表,我尝试打开 block class="thelanguage"style="display: none;"
点击class="technology closedlanguage"
。
但我需要的是,当我点击 class="technology closedlanguage"
时,类将 "closedlanguage"
更改为 "openlanguage"
和样式将 'none'
更改为 'block'
。
但是当我点击的时候,div 列表中只有一个 block 打开
<script type="text/javascript">
$(document).ready(function () {
$('.lsiting-main .closedlanguage').click(function (event) {
event.preventDefault();
var target = $('.thelanguage');
$(target).toggleClass('hidden show');
$('.thelanguage').css('display', 'block');
})
});
最佳答案
我已经稍微更新了 HTML,如果您愿意使用 JavaScript,请引用下面的代码,它会按您的预期工作。
这是 JSFiddle 链接:Working JS Fiddle Link
JS 代码是:
<script>
document.getElementById("technologyclosedlanguage").addEventListener("click", myFunction);
function myFunction(){
var thelanguage = document.getElementById("thelanguage");
var technology = document.getElementById("technologyclosedlanguage");
thelanguage.style.display="block";
technology.className = "technologyopenlanguage";
alert(technology.className); //class name changed.
}
</script>
HTML 代码是:
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technologyclosedlanguage" id="technologyclosedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" id="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
The Language
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
让我知道它是否有效,对您有帮助。快乐编码。
关于javascript - 从 HTML 中的 div 列表中单击 div 上的打开 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33539222/