Question

我有一长串HTML格式：

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

我无法弄清楚如何：

仅在项目div悬停时显示Action按钮。
点击Details链接时显示Show details框。

我知道这是非常基本的js东西！：（

Answer 1

首先，我稍微更新了你的标记：

<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();

Answer 2

我对您的javascript，HTML和CSS here's a fiddle with everything working进行了一些修改。

我还确保代码不会因重复元素而破坏。

JS

$(".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; }

Answer 3

您可以尝试将不同的类附加到您的元素上。希望这段代码有帮助

<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>

Answer 4

<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.

Answer 5

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

你应该在这里指定一个类名，或者更好的是一个显示详细信息的ID，你可以内联它。但是，假设，它的id是'show-detail'：

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

请注意，我已使用tag#id来提高效果。如果指定标记名，jQuery会以更快的速度选择元素。如果你使用的是ID，那不是什么大问题，但是如果你使用$('.classname')选择器并且你知道所有.classname都是div，那么使用$('div.classname')

P.S。如果你正在寻找更通用的方法，你可能最好看看其他答案。

Answer 6

您可以使用.hover功能

使用toggle()

看看这个小提琴：

http://jsfiddle.net/ADLLR/

如何在悬停时显示嵌套div？ - JQuery初学者

6 个答案: