Отобразите динамическое дочернее значение во всплывающей форме, щелкнув его родительский заголовок в php и ajax
У меня есть несколько динамических заголовков, что-то вроде изображения ниже. Каждый заголовок соответствует своему динамическому дочернему значению. когда я нажму на заголовок, он будет отображать только свое дочернее динамическое значение во всплывающей форме. Я попробовал ‘facebox’ и загрузчик модальный, но ничего не может случиться. Кто-нибудь, пожалуйста, решите эту проблему.
заранее спасибо.
упомянул, что дочернее значение хранится в неупорядоченном списке.
Структурированная форма, которая содержит динамическое значение, выглядит примерно так …
<ul>
<li>
<h4>Sparkle</h4>
<ul>
<li><a href="#"> Item 1 </a></li>
<li><a href="#"> Item 2 </a></li>
<li><a href="#"> Item 3 </a></li>
<li><a href="#"> Item 4 </a></li>
</ul>
</li>
<!-- This is the list item that is open by default -->
<li class="active">
<h4>IDG</h4>
<ul>
<li><a href="#"> Item 1 </a></li>
<li><a href="#"> Item 2 </a></li>
<li><a href="#"> Item 3 </a></li>
<li><a href="#"> Item 4 </a></li>
</ul>
</li>
<li>
Решение
Вы можете сделать что-то вроде этого и изменить в соответствии с вашими потребностями
<ul id="column1">
<li rel="1">Item 1</li>
<li rel="2">Item 2</li>
<li rel="3">Item 3</li>
<li rel="4">Item 4</li>
</ul>
<script>
$('ul li').each(function(i)
{
$(this).attr('rel'); // This is your rel value
});
</script>
Другие решения
<ul>
<li>
<a href="#myDiv" class="various">Sparkle</a>
<ul id="myDiv" style="display:none">
<li><a href="#"> Item 1 </a></li>
<li><a href="#"> Item 2 </a></li>
<li><a href="#"> Item 3 </a></li>
<li><a href="#"> Item 4 </a></li>
</ul>
</li>
<li>
<a href="#myDivv" class="various">IDG</a>
<ul id="myDivv" style="display:none">
<li><a href="#"> Test 1 </a></li>
<li><a href="#"> Test 2 </a></li>
<li><a href="#"> Test 3 </a></li>
<li><a href="#"> Test 4 </a></li>
</ul>
</li>
<script type="text/javascript">
$(document).ready(function(){
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
autoScale: false,
padding: 0,
closeClick: false,
beforeLoad: function () {
var url = $(this.element).attr("id");
this.href = url
}
});
});
</script>