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

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

javascript php

如何通过使用PHP和JavaScript在div上设置按钮来展开或折叠div,javascript,php,Javascript,Php,我正在使用php和javascript扩展或折叠一些div[必须通过deafolt折叠]，方法是在div上设置一个按钮[其文本默认应为expand]，当我单击该按钮时，div将被扩展，该按钮的文本应自动更改为“collapse”再次，如果我单击折叠按钮，div应该关闭，文本默认更改为“expand”，默认情况下所有div都应该关闭。下面是我使用的代码： <!DOCTYPE html> <html> <head> <script src='http://a

我正在使用php和javascript扩展或折叠一些div[必须通过deafolt折叠]，方法是在div上设置一个按钮[其文本默认应为expand]，当我单击该按钮时，div将被扩展，该按钮的文本应自动更改为“collapse”再次，如果我单击折叠按钮，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>


函数更改（）
{
if（document.getElementById（“myButton1”）.value==“展开”）
{
document.getElementById（“myButton1”）.value=“collapse”；
$（文档）.ready（函数（）{
$（“#myButton1”）。单击（函数（）{
$（“div.container”）.hide（“slow”）；
});
}
其他的
{
document.getElementById（“myButton1”）.value=“展开”；
$（文档）.ready（函数（）{
$（“#myButton1”）。单击（函数（）{
$（“div.container”）.show（“slow”）；
});
}
}
});
您可以使用：
$("#hide").click(function(){
  $("p").hide();
});

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

或开关功能：
$("button").click(function(){
  $("p").toggle();
});

以下是工作示例：
我会更改您的代码，以便：
<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>


$（文档）.ready（函数（）{
$（'.myButton'）。单击（函数（）{
如果（this.value==='collapse'）{
//如果是开着的，就关上
开=假；
this.value='expand'；
$（this.next（“div.container”）.hide（“slow”）；
}
否则{
//如果是的话，就把它打开
开放=真实；
this.value='collapse'；
$（this）.this（“[value='collapse']”）。单击（）；//折叠打开的div
$（this.next（“div.container”）.show（“slow”）；
}
});
});


你可以用这个
剧本
$(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。
您不应该使用w3s
，而是使用官方jQuery网站：@Tikky请看此处的按钮文本未更改我希望文本在展开或折叠时应更改，您能为所有div显示这一点，因为它无法正常工作吗对于所有div，我运行所有div的代码，但它正在运行，但它正在扩展和折叠所有四个div，而我只单击一个扩展按钮。请尝试在整个代码中运行它，您将获得problem@MunanshuMadaan-是因为$（“div.container”）
使用container
类查找所有div，您可以尝试使用jQuery函数next
（）查找下一个同级元素，在您的例子中是div。那么如何通过这个函数（api.jQuery.com/next）一次只查找一个div呢你能解释一下吗…@MunanshuMadaan-更新了我的代码，现在应该可以了。你不应该对更多的按钮使用相同的id，在class=“myButton”中更改id=“myButton1”在您的php代码中OK good one@TheGr8_Nik正常工作，但默认情况下不会关闭。加载或刷新时必须关闭div。div con正在更改其大小，因为它不是一个按钮，您可以在默认情况下关闭它们，并在扩展或折叠时将其速度调整为慢速。。
$(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');}

    })

});

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