Question

我有一个容器元素，可以在点击时展开。此容器包含一些子标记。当浏览页面上的元素时，当到达这些子标签时，我希望容器展开以显示它们。

为此，我写了以下函数......

$("#inlineSummaryWrapper a").focus(function(){
  $("#inlineSummaryWrapper").animate({"height":"100px"})
  });

然而这不起作用！

如果一个比我自己更好的程序员可以提供帮助，我将不胜感激。

提前致谢。

编辑以添加示例标记：

<div id="inlineSummary" class="displayToggle">
  <h2>Summary</h2>
  <div id="inlineSummaryWrapper">
   <dl>
    <dt>Product:</dt>
    <dd class="define"> <span class="NA"><a href="product.aspx" tabindex="92">Required</a></span> </dd>
   </dl>
  </div>
 </div>

Answer 1

这似乎工作正常：

<style type="text/css">
#inlineSummaryWrapper {
    height: 50px;
    background-color: #000;
}
</style>

<div id="inlineSummary" class="displayToggle">
    <h2>Summary</h2>
        <div id="inlineSummaryWrapper">
        <dl>
            <dt>Product:</dt>
            <dd class="define"> <span class="NA"><a href="#" tabindex="92">Required</a></span> </dd>
        </dl>
    </div>
</div>

<script type="text/javascript">
$("#inlineSummaryWrapper a").focus(function(){
     $(this).closest("#inlineSummaryWrapper").animate({"height":"100px"});
    return false;
});
</script>

如果您的javascript高于div，请将其包装在：

中

$(document).ready(function(){
//javascript here
});

一旦DOM完成加载，它就会触发。

http://jsfiddle.net/YgjzD/6/

Answer 2

试试这个......

$("#inlineSummaryWrapper a").focus(function(){
    $(this).closest("#inlineSummaryWrapper").animate({"height":"100px"})
});

$（this）是a，而.closest（）查找与选择器匹配的最近父级。

Jquery - 当子链接获得焦点时扩展项的父容器

2 个答案: