如何通過使用PHP和JavaScript在div上設置按鈕來擴展或折疊div

Question

我正在使用php和javascript通過在div上設置按鈕[其文字默認情況下應該擴展]來擴展或折疊某些div [必須通過默認折疊]，當我單擊該按鈕時div會得到擴展，並且該文本按鈕應自動更改為“折疊”，如果再次單擊該折疊按鈕，則div應該關閉，文本默認更改為“ expand”，默認情況下所有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的初學者，所以我盡了最大努力，但是dint得到了想要的結果，請提前幫助我。

這是更多信息

它不適用於我的實際代碼是：

    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您的代碼不適用於此。 這是實際代碼的一小部分，但無法正常工作

Answer 1

您可以使用：

$("#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

Answer 2

我會更改您的代碼，以便：

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

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

如何通過使用PHP和JavaScript在div上設置按鈕來擴展或折疊div

問題描述

3 個解決方案

解決方案1
0 2014-12-01 11:53:26

解決方案2
0 已采納 2014-12-01 11:54:32

解決方案3
0 2014-12-01 12:39:35

如何通過使用PHP和JavaScript在div上設置按鈕來擴展或折疊div

問題描述

3 個解決方案

解決方案1 0 2014-12-01 11:53:26

解決方案2 0 已采納 2014-12-01 11:54:32

解決方案3 0 2014-12-01 12:39:35

解決方案1
0 2014-12-01 11:53:26

解決方案2
0 已采納 2014-12-01 11:54:32

解決方案3
0 2014-12-01 12:39:35