在网页上,一行中有五列(.toplvl
)。每个都有自己的类,例如 .tli-1、.tli-2、.tli-3、.tli-4、.tli-5
所以第三列有类 .tli-3
在 .toplvl
行下方,我还有 5 行,分别称为 .tlcr-1、.tlcr-2、.tlcr-3、.tlcr-4、.tlcr-5
所以第三行有类 .tlcr-3
我想实现什么目标
当鼠标悬停在 .tli-1
上时,它应该显示 .tlcr-1
并保持打开状态,只要鼠标指针位于 .tli-1
或 .tlcr-1
同样的逻辑也适用于所有其他列。
它需要是动态的
列数和行数可以不同。一次可以是 3,但也可以是 50。除了数字部分之外,类别将保持不变。例如,如果它们的位置为 50,则最后一列将称为 .tli-50
,最后一行将称为 tlcr-50
我当前的代码
这可行,但需要我复制 50 多次并手动更改数字。一定有更好的方法。
$( ".tli-2" ).mouseenter(function() {
$( ".tlcr-2" ).css('display', 'block');
})
$( ".tli-2" ).mouseleave(function() {
$( ".tlcr-2" ).mouseenter(function() {
$( ".tlcr-2" ).css('display', 'block');
$( ".tlcr-2" ).mouseleave(function() {
$( ".tlcr-2" ).css('display', 'none');
})
})
$( ".tlcr-2" ).css('display', 'none');
});
更好地理解结构的 fiddle
https://jsfiddle.net/3naxLfm6/
感谢您的帮助
所有要回复的人。非常感谢您抽出时间。我真的很感激一个带有工作 fiddle 的解决方案,但当然绝对欢迎任何建议。此外,如果问题有任何不清楚的地方,请允许我在投反对票之前改进它。
最佳答案
如果我理解正确的话,你可以做一些事情。
$('.column').on('mouseenter', function() {
$('.tlcr').hide();
const index = $(this).index('.column');
$('.tlcr').eq(index).show();
});
.row {
display:flex;
flex-flow:row nowrap;
justify-content:space-between;
width:100%;
min-height:50px;
}
.tlcr {
display: none;
}
.column {
text-align:center;
}
.w20 {
width:20%;
}
.tli-1, .tlcr-1 {background:red;}
.tli-2, .tlcr-2 {background:blue;}
.tli-3, .tlcr-3 {background:green;}
.tli-4, .tlcr-4 {background:purple;}
.tli-5, .tlcr-5 {background:orange;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row toplvl">
<div class="column w20 tli-1">Item 1</div>
<div class="column w20 tli-2">Item 2</div>
<div class="column w20 tli-3">Item 3</div>
<div class="column w20 tli-4">Item 4</div>
<div class="column w20 tli-5">Item 5</div>
</div>
<div class="row tlcr tlcr-1">Content 1</div>
<div class="row tlcr tlcr-2">Content 2</div>
<div class="row tlcr tlcr-3">Content 3</div>
<div class="row tlcr tlcr-4">Content 4</div>
<div class="row tlcr tlcr-5">Content 5</div>
关于javascript - 使用通用(动态)代码显示/隐藏悬停列上的行其他行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60479550/