jquery - 无法切换悬停以显示另一个项目列表
问题描述
我正在尝试使用切换显示更多详细信息。代码片段如下: 样式:
<style>
.flyout {
position:relative;
width:100px;
height:150px;
background:lightblue;
overflow: hidden;
z-index:10000;
}
.hidden{
display:none;
}
</style>
在悬停时更改类的脚本:
<script>
$j = jQuery.noConflict();
$j(document).ready(function() {
$j("#menu").hover(function() {
$j('.hidden').toggleClass('flyout');
});
});
</script>
这是默认隐藏的部分:
<ul class="hidden">
<apex:repeat value="{!Leads}" var="m">
<li class="leads" >{!m.description__c}<div></div>{!m.assigneddate__c}<div></div>{!m.details__c}</li>
</apex:repeat>
</ul>
这是默认显示的部分,在悬停鞋上显示详细信息:
<ul class="sideBarList" id="menu">
<apex:repeat value="{!Leads}" var="m" id="menu">
<li class="leads">{!m.name}<div></div>{!m.CreatedDate}<div></div>{!m.object__c}</li>
</apex:repeat>
</ul>
解决方案
试试这个方法
<script>
$j = jQuery.noConflict();
$j(document).ready(function(){
$j("#menu").hover(function(){
$j('#menuLink').toggleClass('hidden');
});
});
</script>
修改此部分添加id="menuLink"
<ul id="menuLink" class="hidden">
<apex:repeat value="{!Leads}" var="m">
<li class="leads" >{!m.description__c}<div></div>{!m.assigneddate__c}<div></div>{!m.details__c}</li>
</apex:repeat>
</ul>
推荐阅读
- azure-data-factory - ADF 计划/触发月末后 50 天
- python - Tensorflow Datasets“so2sat”数据集仅提供黑色 rgb 图像
- ms-word - 来自业务中心的正确 XML 数据集的 XML 映射的不稳定数据
- python - Python:具有重叠和汉明窗口的音频分割
- python - 如何使用 tempfile 模块从 NamedTemporaryFile 获取 Python os.PathLike 对象?
- php - Doctrine DBAL 2.13 $statement->execute() 返回 bool(而不是 Result)
- html - 部分权重大小以适合 html css 中的文本
- reactjs - 无效的挂机呼叫警告
- java - 如何部署 javafx 应用程序
- php - 如何根据虚拟主机设置 php 设置?