通过在php和ajax中单击其父标题，以弹出形式显示动态子值

Question

我有多个动态标题，如下图所示。每个标头都包含其动态子值。当我点击标题时，它将在弹出窗体中仅显示其子动态值。我试过'facebox'和bootstrap模态，但不能发生任何事情。有人请解决这个问题。 提前致谢。 提到子值存储在无序列表中。   

包含动态值的表单结构如下所示......

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

Answer 1

你可以做这样的事情并根据你的需要改变

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

Answer 2

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