Jquery - расширение родительского контейнера элемента, когда дочерняя ссылка получает фокус - PullRequest
Новая
       2

Jquery - расширение родительского контейнера элемента, когда дочерняя ссылка получает фокус

1 голос
/ 03 февраля 2012

У меня есть элемент контейнера, который можно раскрыть при нажатии. Этот контейнер содержит несколько дочерних тегов. Когда эти дочерние теги будут доступны во время перемещения по элементам на странице, я бы хотел, чтобы контейнер раскрылся, чтобы показать их.

Для этого я написал следующую функцию ... 

$("#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>

Ответы [ 2 ]

2 голосов
/ 03 февраля 2012

Кажется, это работает нормально: 

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

0 голосов
/ 03 февраля 2012

Попробуйте это ... 

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

$ (this) - это a, а .closest () ищет ближайшего родителя, соответствующего селектору.

...