无法切换悬停以显示另一个项目列表
Unable to toggle on hover in to display another list of items
我正在尝试使用切换显示更多详细信息。代码片段如下:
样式:
<style>
.flyout {
position:relative;
width:100px;
height:150px;
background:lightblue;
overflow: hidden;
z-index:10000;
}
.hidden{
display:none;
}
</style>
悬停时更改 class 的脚本:
<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>
我正在尝试使用切换显示更多详细信息。代码片段如下: 样式:
<style>
.flyout {
position:relative;
width:100px;
height:150px;
background:lightblue;
overflow: hidden;
z-index:10000;
}
.hidden{
display:none;
}
</style>
悬停时更改 class 的脚本:
<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>