要切换的按钮的正确算法

correct algorithm for buttons to toggle

本文关键字：算法 按钮      更新时间：2023-09-26

我有两个按钮，Edit_1和Edit_2。通过单击其中的每一个，一个"扩展"div应该出现在已单击的按钮的正下方。

在我编写的函数中，如果"expansion"div的显示属性在edit_1下为"block"，并且单击edit_2，则寡妇将在edit_2下被替换。但如果我点击edit_1本身，"扩展"窗口不会消失。

我可以通过添加另一个"扩展"窗口来轻松解决这个问题，但随着"编辑"标签的增加，我需要在它们之间正确地移动这个"一个"扩展窗口。如果你能帮我做这件事，我将不胜感激；

HTML:

<div id="container">
    <div id="section_1"></div>
    <div id="section_2"></div>
    <button id="edit_1" onClick="edit(1);"></button>
    <button id="edit_2" onClick="edit(2);"></button>
    <div id="expansion"></div>
</div>

CSS：

*{
    margin:0px;
    padding:0px;}
body {
    width:100%;
    background-color:#F4F4F2;
    margin-top:15px;
    font-family:verdana;}
#container{
    width:820px;
    height:400px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    border: dashed 2px blue;
    position:relative;
    z-index:1;}
#section_1{
    width:800px;
    height:198px;
    border-top: solid 2px #D24726;
    background-color:#ffcccc;
    top:0px;
    position: absolute;
    z-index:2;}
#section_2{
    width:800px;
    height:198px;
    border-top: solid 2px #14826D;
    background-color:#C1FBDE;
    top:200px;
    position: absolute;
    z-index:2;}
#edit_1{
    width:50px;
    height:15px;
    position:absolute;
    margin-left:740px;
    margin-top:15px;
    border:none;
    cursor:pointer;
    z-index:4;
    background:url(../images/edit.fw.png) no-repeat;}
#edit_2{
    width:50px;
    height:15px;
    position:absolute;
    margin-left:740px;
    margin-top:215px;
    border:none;
    cursor:pointer;
    z-index:4;
    background:url(../images/edit.fw.png) no-repeat;}
#expansion{
    width:200px;
    height:120px;
    background-color:#FFFFFF;
    position:absolute;
    z-index:3;
    margin-left:600px;
    top:0px;
    padding-top: 40px;
    padding-left:10px;
    padding-right:10px;
    border-top:solid 2px #D24726;
    display:none;}

javascript:

function edit(clicked_edit){
    var click=document.getElementById('expansion').style.display;
    if (click=='block'){ /* in any case, if the display property is block, it turns it to none*/
        document.getElementById('expansion').style.display='none';
        }
    var tp=document.getElementById('section_'+clicked_edit).offsetTop;
    document.getElementById('expansion').style.top=tp+'px'; 
    document.getElementById('expansion').style.display='block';
    }

JSFiddle

JQuery方法

你可能会发现这个JSFiddle使用了一个很好的切换效果。

JQuery是：

jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {        
         jQuery('#content').toggle('show');
    });
});

我敢肯定你可以在你的项目中利用这一点：）

Javascript方法

看看这个-它没有使用JQuery，应该适合你：）

它是在这里找到的：

另一种方法

这个演示也是在按下时显示/隐藏div的另一种方式。，所以有很多选项可供选择！：）

<script>
    function showhide()
     {
           var div = document.getElementById("newpost");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
     }
  </script>
相关文章：