DIV多个动态可折叠 - DIV multiple dynamic Collapsible

DIV multiple dynamic Collapsible

本文关键字：可折叠动态 DIV | 更新日期: 2023-09-27

我试图写一个查询(使用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>

你能帮帮我吗?我已经无计可施了!

Jquery在这里是一个很好的选择。我相信下面的代码可以满足你的需求:

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

这应该给你一个起点。你可以将它合并到一个外部JS文件(例如ext.js)中的普通JS函数中。

希望这对你有帮助!

将e.style.display == "改为e.style。display == 'block'还

e.style。display = " to

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

Working Jsfiddle: http://jsfiddle.net/6hdre/

希望这对你有帮助!