У меня есть ситуация, когда элемент содержит n
кликабельные дескрипторы и n
открываемые элементы:
<div class="revealer">
<div class="hotspot">
<a class="handle" href="javascript:;">A</a>
<div class="reveal">
<p>Content A.</p>
</div>
<div class="reveal">
<p>Content B.</p>
</div>
</div>
</div>
Когда я нажимаю «дескриптор», он показывает оба «раскрывающихся» элемента.Это отлично работает.Этот кусок кода помещается в данный документ везде, где хочет создатель.Включая ... внутри другого <div class="reveal"></div>
элемента.Возможность вложения этих объектов откровения разумна и полезна в моем случае.
То, на чем я застрял, - это достойный способ обрабатывать только непосредственные элементы <div class="reveal"></div>
, а не вложенные (в противном случае нажмитена внешнем дескрипторе откроются все вложенные раскрытия).
Итак, вот пример структуры:
<div class="revealer">
<div class="hotspot">
<a class="handle" href="javascript:;">A</a>
<div class="reveal">
<p>Content A.</p>
</div>
<div class="reveal">
<p>Content B.</p>
<!-- nested revealer -->
<div class="revealer">
<div class="hotspot">
<a class="handle" href="javascript:;">A</a>
<div class="reveal">
<p>Sub-content A.</p>
</div>
<div class="reveal">
<p>Sub-content B.</p>
</div>
</div>
</div>
<script type="text/javascript"> // a setup script which instantiates a Module object for this revealer, which controls all revealing </script>
</div>
</div>
</div>
<script type="text/javascript"> // a setup script, which instantiates a Module object for this revealer, which controls all revealing </script>
Я активно использую фреймворк YUI2.8.2, так что сейчасУ меня есть тест, когда вы щелкаете по ручке, чтобы собрать набор своих собственных откровителей и показать их, но исключая вложенные раскрытия, которые должны выполняться их собственным экземпляром, а не родителями.
Тест Javascript выглядит следующим образом:
// grab all 'reveal' elements to show
var reveals = yd.getElementsBy(function(el){
if( yd.hasClass(el, REVEAL_CLASS) && pObj.isChild( el ) ){
return true ;
}
return false;
}, null, this.root() );
// the test method above is "isChild( el )", the 'el' arg is a 'handle' inside a 'hotspot', so I have...
isChild: function( el )
{
var ancestor = yd.getAncestorBy( el, function(nestedEl){
return yd.hasClass(nestedEl, REVEALER_CLASS);
});
// ancestor is the immediate parent 'reveal' element
var forefather = yd.getAncestorBy( ancestor, function(nestedEl){
return yd.hasClass(nestedEl, REVEALER_CLASS);
});
// forefather is
if(forefather){
// Yuck yuck yuck, get rid of this dependency on a custom className :(
if(!yd.hasClass(this.getRoot(), 'revealer-nested') ){
return false ;
}
}
return true ;
},
Но все, что я могу собрать, это добавить новое имя класса revealer-nested
к вложенному элементу revealer
... но я действительно Я не хочу этого делать, потому что эти объекты должны существовать в своем собственном контексте, а не заботиться о них или не подвергаться влиянию со стороны родителей.
... Надеюсь, это не tmi, пожалуйстазадать любой необходимый вопросs и т. д. для получения дополнительной информации - возможно, я упустил некоторую контекстную информацию, так как я сейчас в процессе рефакторинга этого модуля.
Большое, большое спасибо заранее.
РЕДАКТИРОВАТЬ: Это такжеочень важно, чтобы я не начинал полагаться на свойства-потомки, такие как parentNode, childNode [x], nextSibling и т. д., потому что в настоящее время этот модуль достаточно гибок в том смысле, что его элементы «раскрыть» и «обрабатывать» могут находиться в другой разметке ивсе еще быть целью - пока они находятся внутри «горячей точки».