Итак, я использую .show () и .hide () для отображения, отображения и скрытия некоторых элементов на моей странице при определенных триггерах.Скажем, у меня есть 3 div на вершине друг друга, и я расширяю верхний, содержимое одного из нижних, кажется, не перемещается, пока я не наведу на него курсор мыши.У меня это происходит в нескольких проектах с совершенно разными макетами.Существует ли общая причина / исправление для этого?
После нажатия кнопки "развернуть":
После наведения мыши на элемент:
Javascript:
//expand details per container
$('.Trigger').live('click', function () {
var thisid = $(this).attr('toggletrigger');
if ($(thisid).css('display') == 'none') {
$(thisid).show();
$(this).css('background-image', 'url("../Content/themes/base/images/btn_expandcollapse_small-2.png")');
} else {
$(thisid).hide();
$(this).css('background-image', 'url("../Content/themes/base/images/btn_expandcollapse_small-1.png")');
}
});
HTML
<span class="Trigger" toggletrigger=".GeneralHidden">
<div class="Section">
<span class="GeneralHidden Hidden">
//other stuff here that *shouldn't* be relevant.
</span>
</div>
<div class="Section">
//other stuff here that *shouldn't* be relevant.
</div>
CSS
.Hidden {display: none;}
.GeneralHidden {}
.Section {margin: 0px; padding: 0px;
padding-top:5px;
background-color: #FBFBFB;
border: 1px solid #FBFBFB;
border-left: 3px solid gray;}
.Section:hover {background-color: White; border: 1px solid gray; border-left: 3px solid gray;}
Я подтвердил, что это как-то связано с
<div class="Section">
This is a test.
</div>
^^^ Добавление этого кода после правильной работы расширяемого элемента.
<div class="Section">
<fieldset>
This is a test.
</fieldset>
</div>
^^^ Добавление этого кода демонстрирует то же ошибочное поведение, что и раньше.Я не применяю css к полям.