如何通过使用 PHP 和 JavaScript 在 div 上设置按钮来展开或折叠 div答案

【问题标题】：How to expand or collapse a div by setting a button on it using PHP and JavaScript如何通过使用 PHP 和 JavaScript 在 div 上设置按钮来展开或折叠 div
【发布时间】：2014-12-01 11:46:39
【问题描述】：

我正在使用 php 和 javascript 来展开或折叠一些 div [必须由 deafult 折叠]，方法是在 div 上设置一个按钮 [默认情况下应展开其文本]，当我单击该按钮时，div 会展开并且该按钮的文本应自动更改为“折叠”，如果我再次单击该折叠按钮，则应关闭 div，默认情况下将文本更改为“展开”，默认情况下所有 div 都应关闭这是我正在使用的下面给出的代码：

<!DOCTYPE html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type="text/javascript">
function change()
{
if(document.getElementById("myButton1").value=="expand")
{
document.getElementById("myButton1").value="collapse";

$(document).ready(function(){
  $("#myButton1").click(function(){
  $("div.container").hide("slow");
  });
}
else
{
document.getElementById("myButton1").value="expand";

$(document).ready(function(){
  $("#myButton1").click(function(){
  $("div.container").show("slow");
  });

 }
}

});
</script>
</head>
<body>
<?php
for($i=0;$i<=3;$i++)
{
echo"<div style='position:relative;border:1px solid #A5BEBE;background-color: #E7EFEF;     width:100%; height:300px;'> <input onclick='change()' type='button' value='expand' id='myButton1'     style='position:relative;left:85%;top:4%;background-    color:#B20000;color:white;width:70px;height:20px;font-size:15px;' >";

echo "<div class='container' style='border:1px solid #A5BEBE;background-color:     white;width:100%;height:92.5%;'>
  some text here
</div>";
echo "</div><br><br>";
}
?>

</body>
</html>

我只是 php 的初学者，所以尽我所能，但力求得到想要的结果，请提前帮助我解决这个问题

这里有更多信息

它不适用于我的实际代码：

    while($runrows = mysql_fetch_assoc($getquery))
    {
    $title = $runrows ['sometext'];
    $desc = $runrows ['sometext'];
    $url = $runrows ['sometext'];
$a = $runrows ['sometext'];
$b = $runrows ['sometext'];
$c = $runrows ['sometext'];
$d = $runrows ['sometext'];
$e = $runrows ['sometext'];
$f = $runrows ['sometext'];
$g = $runrows ['sometext']; 


echo "
<div style='position:relative;border:1px solid #A5BEBE;background-color: #E7EFEF;width:84%;'>     <input onclick='change()' type='button' value='expand' class='myButton'         style='position:relative;left:85%;top:4%;background-    color:#B20000;color:white;width:70px;height:30px;font-size:15px;' >  <b><p style='padding-    bottom:2px;font-size:30px;'><font color='red'>".$title."</font></p></b><p><b>sometext :</b>$desc<br>
<b> sometext:-</b><a href='".$url."'>$url</a><br>
<b>sometext :</b>$b<br>
<b>sometext :</b>$c<br>
<b>sometext :</b>$d<br>
<b>sometext :</b>$e<br>
<b>sometext :</b>$f<br>
<b>sometext :</b>$g</p>";
echo "<div class='container' style='border:1px solid #A5BEBE;background-color: white;'>";
 include ('botfunction.php'); 
echo "</div>";
echo "</div><br>";

}

@TheGr8_Nik 您的代码不适用于此。这是实际代码的一小部分，但它在那里不起作用

【问题讨论】：

标签： javascript php

【解决方案1】：

我会改变你的代码：

<script>
  $(document).ready(function(){

    $('.myButton').click(function(){
      if ( this.value === 'collapse' ) {
        // if it's open close it
        open = false;
        this.value = 'expand';
        $(this).next("div.container").hide("slow");
      }
      else {
        // if it's close open it
        open = true;
        this.value = 'collapse';
        $(this).siblings("[value='collapse']").click(); //to collapse the open divs
        $(this).next("div.container").show("slow");
      }
    });

  });
</script>

jsFiddle example

【讨论】：

我为所有 div 运行您的代码，但它会在我仅单击一个展开按钮时展开和折叠所有四个 div。请尝试在整个代码中运行它，你会遇到问题
@MunanshuMadaan - 是因为 $("div.container") 找到所有具有 container 类的 div，您可以尝试使用 jQuery 函数 next (api.jquery.com/next) 在您的div的大小写
那么我怎样才能通过这个（api.jquery.com/next）一次完成一个工作，你能解释一下吗...
@MunanshuMadaan - 更新了我的代码，现在应该可以工作了。您不应该为更多按钮使用相同的 id，在您的 php 代码中更改 id="myButton1" in class="myButton"
好的，@TheGr8_Nik 可以正常工作，但默认情况下它们不会关闭...加载或刷新时必须关闭 div

【解决方案2】：

你可以使用：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

或切换功能：

$("button").click(function(){
  $("p").toggle();
});

以下是工作示例： http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle

【讨论】：

你不应该使用w3schools，而是使用官方jQuery网站：api.jquery.com/toggle
@Tikky 看到按钮的文本没有改变我希望文本应该在扩展或折叠方面进行更改，你能给我看一下所有的 div 因为它不能正常工作div

【解决方案3】：

JsFiddle

你可以用这个

脚本

$(function(){
    $(document).on('click','#con div button',function(){
     if($(this).parent().hasClass('expand'))
     { $(this).parent().removeClass('expand');
       $(this).html('Expand');}
        else{$(this).parent().addClass('expand');
       $(this).html('Collapse');}

    })

});

HTML

<div id="con">
    <div class="expand"><button >Collapse</button></div>
    <div class="expand"><button >Collapse</button></div>
    <div class="expand"><button >Collapse</button></div>
    <div class="expand"><button >Collapse</button></div>
</div>

这将根据容器展开和折叠 div。

【讨论】：

div con 正在改变它的大小，因为它不是一个按钮，你可以让它们默认关闭，并在它展开或折叠时调整它的速度。