Javascript 通过单击展开内容

当我单击

更多

时。我希望内容应该扩展。我在我的页面上有10个问题，还有更多选择。问题内容是通过php脚本实现的

<?php
$result = mysqli_query($conn, $query) or die("error: " . mysqli_error($conn));
//fetch the data.
if (mysqli_num_rows($result) > 0) {
    while($data = mysqli_fetch_assoc($result)) {
      $question = $data['question'];
      echo "<span class=\"spanstyle\" id=\"fullquestion\">" . substr($question, 0, 170);
      echo  "...<a href=\"#\" onClick=\"contentExpand();\">more</a></span><br>";
      }
}   
?>

问题是，

$question

正在更改循环中的值。它没有固定的值

---

我还想知道，我只能在不使用javascipt的情况下使用php来实现这一点。

对于我的解决方案，您需要某种$data['id']，它对于每个问题都是唯一的。。我认为这不能只在PHP中完成，但您应该尝试使用jQuery，它使javascript更容易

<?php
  $result = mysqli_query($conn, $query) or die("error: " . mysqli_error($conn));
  //fetch the data.
  if (mysqli_num_rows($result) > 0) {
      while($data = mysqli_fetch_assoc($result)) {
        $question = $data['question'];
        echo "<span class='spanstyle' id='shortQuestion{$data['id']}'>" . substr($question, 0, 170).
           "...<a href='#' onClick='return contentExpand({$data['id']});'>more</a></span>
  <span class='spanstyle' id='longQuestion{$data['id']}'>{$data['question']}</span>
  <br>";
        }
  }   
  ?>

---

您的代码有几个问题。关于你的问题，最重要的是：

while循环正在生成具有相同id的多个跨度元素
onClick函数应该包含对要展开的元素的引用
您不需要包含任何约束span元素大小的代码，因此不需要展开任何内容
如何修复它们：

修改while循环
创建一个对行进行计数的$i变量，并将其添加到span id、link id和javascript函数中，方法如下：

$i = 0;
while($data = mysqli_fetch_assoc($result)) {
    $i++;
    $question = $data['question'];
    echo "<span class='spanstyle' id='fullquestion_" . $i. "' >";
    echo  "<a href='#' id='link_" . $i . "' onClick='contentExpand(" . $i. ");'>more</a> ";
    echo $question."</span><br>";
  }

如何在没有javascript（仅PHP）的情况下实现：
这当然是可能的，但我想你不想这么做

但是，如果您仍然想这样做，则只使用有关$question的部分信息生成循环（就像您在原始代码中所做的那样，
substr（
），但将元素放在表单中

当用户单击
more
span元素时，提交表单，以便从客户端将所选项目的信息发送回服务器

然后，PHP脚本将再次生成页面，但这次，所选项目将加载问题的全文（
$question
，而不是
substr（$question，0170）
）

因此，您必须进行一个新的HTTP请求调用（这意味着要重新加载页面，如果您不想使用javascript，AJAX不是一个选项）

这样做会增加新的复杂性，降低效率。
我的建议是，如果你没有充分的理由不使用javascript，就使用它

<script>
function contentExpand( fullcontentId ) {
   document.getElementById('shortQuestion'+fullcontentId).style.display = "none";
   document.getElementById('longQuestion'+fullcontentId).style.display = "inline";
   return false;
}
</script>

$i = 0;
while($data = mysqli_fetch_assoc($result)) {
    $i++;
    $question = $data['question'];
    echo "<span class='spanstyle' id='fullquestion_" . $i. "' >";
    echo  "<a href='#' id='link_" . $i . "' onClick='contentExpand(" . $i. ");'>more</a> ";
    echo $question."</span><br>";
  }

<script>
function contentExpand(id) {
    var link = document.getElementById('link_'+id);
    var span = document.getElementById('fullquestion_'+id);
    if(link.innerHTML=='more')
    {
        link.innerHTML = 'less';
        span.style.width = '100px';
    }else{
        link.innerHTML = 'more';
        span.style.width = 'auto';
    }
}
</script>

span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}