Question

我正在尝试编写一个查询（使用JS，HTML和PHP），我尝试展开或折叠DIV的内容（动态生成）。我成功地在JS中编写了DIV展开和折叠查询。它给了我一个问题。当我尝试扩展位于Div 1下方的任何div时，扩展信息仅显示在DIV 1中。如何在相应的Div中展开？

我正在复制代码的一部分：

JS代码：

function toggle(id) {
  var e = document.getElementById(id);
  if (e.style.display == ''){
    e.style.display = 'none';
  } else {
    e.style.display = '';
  }
}

HTML代码：

<div class="longDes">
    <p>  
        <br>
        <?php echo $rs['shortDescription'];?>
        <?php $idDiv = $rs['TITLE']; echo $idDiv;?>
        <BR> 
    </p>

    <p>
        <br>
        <a href = "#" onclick = "toggle('<?php echo $idDiv?>')">
               See More information about <?=$rs['TITLE']?></a>
        <br>
        <div id = "<?php echo $idDiv ?>" name = "<?php echo $idDiv ?>" style="display:none">
        <?php //echo "this is Buy Flag ".$rs['buyStatus']?>
        <p>
            <?php echo $rs['description']?>
        </p>
    </div>

你能帮忙吗？？我在我的智慧结束！

Answer 1

Jquery在这里使用是一个很好的。我相信以下内容应该符合您的要求：

$(document).ready(function() {
    $(<?php echo $idDiv ?>).slideToggle();
});

这应该给你一个起点。您可以将它合并到外部JS文件（即ext.js）中的普通JS函数中。

希望这有帮助！

Answer 2

将e.style.display ==''更改为 e.style.display =='block' 还

e.style.display =''to e.style.display ='block';

   function toggle(id) {
      var e = document.getElementById(id);
      if (e.style.display == 'block'){
        e.style.display = 'none';
      } else {
        e.style.display = 'block';
      }
    }

工作Jsfiddle： http://jsfiddle.net/6hdre/

希望这会对你有帮助！

DIV多动态可折叠

2 个答案: