如何顯示懸停的嵌套div？ - JQuery的初學者

我有這種格式HTML的一個長長的清單：如何顯示懸停的嵌套div？ - JQuery的初學者

<div id="item555"> 
    Some name 
    <a href="">show details</a> 
    <a href="" id="button555">Action</a> 
</div> 
<div id="details555"> 
    Some details 
</div>

我無法弄清楚如何：

顯示Action按鈕只有當項目的div懸停。
單擊Show details鏈接時顯示Details框。

我知道這是真正基本的js東西！ :(

來源

2011-11-17 Jacob

我已經對您的JavaScript，HTML和CSS進行了一些修改，here's a fiddle with everything working。

我也確保代碼沒有被重複元素破壞。

$(".item-container").hover(
    function() { 
     $(".action", this).show() 
    }, 
    function() { 
     $(".action", this).hide()   
    } 
); 

$(".details").click(function(e) { 
    e.preventDefault(); 
    var detailsDiv = $(this).parent().next("DIV"); 
    detailsDiv.toggle(); 
    if (detailsDiv.is(":visible")) { 
     $(this).text("Hide details") 
    } 
    else { 
     $(this).text("Show details") 
    } 
});

CSS

.action, .details-container { display: none; }

來源

2011-11-17 15:22:25

懸停工程！但我似乎無法獲得點擊細節的工作。有沒有辦法引用「細節」div？當前點擊它切換操作按鈕。 – Jacob

我已經對我的代碼做了一個小的編輯 - 現在就試試。 –

Rory，有沒有辦法將「顯示詳細信息」的文本更改爲「隱藏詳細信息」也使用此代碼邏輯？（然後回到「在第二次點擊時顯示詳細信息） – Jacob

<div id="item555"> 
    Some name 
    <a href="" class="showDetails">show details</a> 
    <a href="" id="button555" style="display:none" class="action">Action</a> 
</div> 
<div id="details555" style="display:none"> 
    Some details 
</div> 

$("div[id^='item']").hover(function() { 
    $(this).find(".action").toggle(); 
}).delegate(".showDetails", "click", function(e) { 
    e.preventDefault(); 
    $(this).parent().next("div").toggle(); 
});

Demo.

來源

2011-11-17 15:14:07 karim79

額外加分，如果你擺脫所有無用的id，因爲這種技術通過其母公司的相對位置引用的項目。 HTTP：//的jsfiddle。net/fDQgg/3/ – James

首先，我更新你的標記位：

<div id="item555" class="item"> 
    Some name 
    <a href="" class="show-details">show details</a> 
    <a href="" id="button555" class="action-button">Action</a> 
</div> 
<div id="details555" class="details"> 
    Some details 
</div>

然後我會用這樣的jQuery中

$('.show-details').click(function() { 
    $(this).parent('div').next('div.details').show(); 
}); 

$('.item').hover(function() { 
    $(this).find('.action-button').show(); 
}, function();

來源

2011-11-17 15:19:08 Filip

$('div#item555').hover(function() { $('a#button555').show(); })

您應該在這裏指定Ÿ一個類名或更好的顯示細節ID，你可以通過內聯來實現。但是，假設，它的id是「顯示細節」：

$('a#show-detail').click(function() { $('div#details555).show() });

請，通知，我用tag#id以提高性能。如果您指定了標記名，jQuery將以更快的速度選擇元素。如果您使用的是ID，它不是大問題，但如果你使用$('.classname')選擇，你知道你所有的.classname是div的，這是更好的使用$('div.classname')

附：如果你正在尋找更通用的方式，你最好看看其他答案。

來源

2011-11-17 15:19:47 Nemoden

您可以使用.hover功能

與toggle()

看看這個小提琴：

http://jsfiddle.net/ADLLR/

來源

2011-11-17 15:23:08 GregM

您可以嘗試將不同的類附加到您的元素。希望這個代碼可以幫助

<html> 
    <head> 
    <title>Test Show Hide Div</title> 
    <script src="jquery.1.6.1.min.js"></script> 
    <style> 
     .item { 
     color: red; 
     } 

    .anchorDetails { 
     color: green; 
     } 

    .anchorAction { 
    color: blue; 
    display: none; 
     } 

    .noDisplay { 
    display: none; 
     } 
    </style> 
    <script type="text/javascript"> 
$(document).ready(function() { 

    $('.item').hover(function() { 
     $('.noDisplay').toggle(); 
    }); 

    $('.anchorDetails').click(function() { 
     $('.anchorAction').toggle(); 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="item555" class="item"> 
    Some name <a href="#" class="anchorDetails">show details</a> <a 
     href="#" class="anchorAction" id="button555">Action</a> 
</div> 
<div id="details555" class="noDisplay">Some details</div> 
</body> 
</html>

來源

2011-11-17 15:26:34 mprabhat

如何顯示懸停的嵌套div？ - JQuery的初學者

回答

相關問題