Удар об стену с этим, надеюсь, кто-то может протянуть руку.У меня есть div-обертка, содержащая много div "содержимого" фиксированной шириныЭто похоже на таблицу, за исключением того, что количество элементов «на строку» не является фиксированным, поэтому, когда размер экрана велик, на экран помещается больше элементов.Довольно простой.
Кроме того, каждый из этих div «content» имеет смежный div «details», который по умолчанию скрыт («style = display: none»), и смежный div «separator», который является пустым и содержит толькостиль "ясно: оба;"
Каждый элемент содержимого / сведений / разделителя имеет уникальный номер в своем идентификаторе, поэтому я могу сказать, что они связаны (например, содержимое123, сведения1234, разделитель1234)
Теперь, когда один из этихщелкает содержимое div, я хочу показать его div "details" под ним.В этой части я частично работал, обернув тег привязки вокруг содержимого div, которое запускает событие javascript onClick, которое, в свою очередь, запускает оператор jQuery, чтобы сделать видимыми детали и разделители div jQuery(".details1234").css("display","block");"
Но вы можете представить мою проблему.Как только этот div «разделитель» обнаружен, он выталкивает (очищает) любые «div» содержимого, которые появляются справа от него, безобразно.Моя мысль, с которой я боролся в течение нескольких часов, состоит в том, чтобы раскрыть «разделитель» div содержимого div, то есть последний, который появляется в «строке», по которой щелкнули.Таким образом, новая «строка» будет открыта разделителем, так что при обнаружении «содержимого» div он появится под выбранным элементом в новой строке.Чтобы сделать это, мне нужно выяснить elementID последнего содержимого div в «строке», и я подумывал об использовании Y-координаты события щелчка мыши, плюс X-координата = к крайнему правому краюdiv обертки минус половина ширины содержимого div фиксированной ширины.Что-то вроде того.Но я врезался в стену и не могу понять.
Может кто-нибудь помочь мне сделать это?Или предложить другое решение?Если пример кода поможет, дайте мне знать, я мог бы привести пример, но это может занять некоторое место на экране в этом посте.
Спасибо всем .. схожу с ума от этого.
РЕДАКТИРОВАТЬ:Пример кода ниже основан на моем сайте.Если щелкнуть ячейку, под ней можно увидеть элемент «детали», но, к сожалению, остальные элементы в «строке» будут сдвинуты вниз.это тот эффект, которого я пытаюсь избежать.Когда щелкают ячейку, я хочу, чтобы «детали» появлялись под ней, а также чтобы другие дивы оставались на своих местах над деталями другой ячейки, в основном я хочу сохранить «строку» нетронутой.В коде вы можете увидеть мои бесплодные эксперименты с использованием div «разделитель», потому что я предполагаю, что если я смогу вставить его после последнего div в строке, то div «details» станет следующей строкой, а затемследующий ряд ячеек.Надеюсь, я все объяснил.День благодарения, из-за которого кровь отвлекается от мозга;)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#overallwrapper{
background: #CCCCCC;
padding-top: 4px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 4px;
margin-top: 5px;
}
.contentcell{
border: 2px solid blue;
padding: 4px;
float: left;
width: 200px;
}
.separator{
clear:both;
display: none;
}
.details{
background:lightgreen;
border: 2px solid green;
width:450px;
display:none;
float:left;
clear:both;
}
</style>
<script type="text/javascript">
function showDetails(contentid){
//first, reset all highlights and close any open content divs
$("#overallwrapper .contentcell").css("border","2px solid blue");
$(".details").css("display","none");
$(".separator").css("display","none");
//now highlight the clicked div and reveal its content div
var contentHI = "#content"+contentid;
var detailsON = "#details"+contentid;
var separatorON = "#separator"+contentid;
$(contentHI).css("border","2px solid green");
//$(separatorON).css("display","block");
$(detailsON).css("display","block");
}
</script>
</head>
<body>
<div id="overallwrapper">
<div id="contentwrapper01">
<div id="content01" class="contentcell"><a href="javascript:showDetails('01');">cell01</a></div>
<div id="details01" class="details">here are details about cell01</div>
<div id="separator01" class="separator"> </div>
</div>
<div id="contentwrapper02">
<div id="content02" class="contentcell"><a href="javascript:showDetails('02');">cell02</a></div>
<div id="details02" class="details">here are details about cell02</div>
<div id="separator02" class="separator"></div>
</div>
<div id="contentwrapper03">
<div id="content03" class="contentcell"><a href="javascript:showDetails('03');">cell03</a></div>
<div id="details03" class="details">here are details about cell03</div>
<div id="separator03" class="separator"></div>
</div>
<div id="contentwrapper04">
<div id="content04" class="contentcell"><a href="javascript:showDetails('04');">cell04</a></div>
<div id="details04" class="details">here are details about cell04</div>
<div id="separator04" class="separator"></div>
</div>
<div id="contentwrapper05">
<div id="content05" class="contentcell"><a href="javascript:showDetails('05');">cell05</a></div>
<div id="details05" class="details">here are details about cell05</div>
<div id="separator05" class="separator"></div>
</div>
<div id="contentwrapper06">
<div id="content06" class="contentcell"><a href="javascript:showDetails('06');">cell06</a></div>
<div id="details06" class="details">here are details about cell06</div>
<div id="separator06" class="separator"></div>
</div>
<div style="clear:both;"></div><!-- to prevent parent collapse -->
</div>
</body>
</html>