我有几个嵌套在父容器下的DIV元素。当用户单击这些cp-anchor
之一时,我想在另一个cp-content
上修改CSS。我尝试了Stack Overflow上发现的数十种方法,但是由于某种原因,它似乎并没有按预期工作。谁能帮助我指出正确的方向?
这是我正在使用的示例的JSFiddle。
<script type="text/javascript">
$( document ).ready(function()
{
$('.cp-anchor').click(function(e)
{
e.preventDefault();
$(this).parent().find('cp-content').css('max-height','none');
$(this).remove();
});
});
</script>
<div class="cp-container">
<div class="cp-content">
<table id="tablepress-4">
</table>
</div>
<div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>
最佳答案
您需要.
表示选择的班级。
// v
$(this).parent().find('.cp-content').css('max-height','none');
$(document).ready(function() {
$('.cp-anchor').click(function(e) {
e.preventDefault();
$(this).parent().find('.cp-content').css('max-height', 'none');
$(this).remove();
});
});
.cp-content {
max-height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cp-container">
<div class="cp-content">
CP CONTENT
</div>
<div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>
这是香草JS版本:
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('.cp-anchor')
.forEach(el => el.addEventListener("click", showContent));
function showContent(e) {
e.preventDefault();
this.parentNode.querySelector('.cp-content').style.maxHeight = 'none';
this.remove();
}
});
.cp-content {
max-height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cp-container">
<div class="cp-content">
CP CONTENT
</div>
<div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>
关于javascript - 在父DIV下按类别查找DIV,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46433057/