Question

我有一个完美的切换，我的问题是当切换关闭时，即使关闭，打开的切换div的完整高度仍然显示。

令人讨厌，因为我使用切换的重点是在页面上腾出更多空间。这是我第一次创建切换，所以我不确定如何解决这个问题。

我的切换内容是通过字符串创建的：

        echo("<button id='onclick' onclick='toggle_visibility(\"first_product$i\")'> " . $_SESSION['Food_Cat_name'] . " </button>");

        echo("<div id='first_product'>");


        echo("<div id='first_product$i' class ='hidden'>");

        echo("<div id='red_head'>");
        echo("<p id='menu_title'  onclick='toggle_visibility(\"first_product$i\")'>  " . $_SESSION['Food_Cat_name'] . " </p>");
        echo("</div>");

的Javascript

           //toggle and change bg colour
function toggle_visibility(tog) {
    var e = document.getElementById(tog); 
    if(e.style.display == "block" || e.style.display == "") { 
        e.style.display = "none"; 

    } else { 
        e.style.display = "block"; 


    } 
}

我似乎无法锻炼我可能出错的地方。

//toggle and change bg colour
    function toggle_visibility(id) {
        var e = document.getElementById(id); 
        if(e.style.display == "block" || e.style.display == "") { 
            e.style.display = "none"; 
            text.innerHTML = "+"; 
        } else { 
            e.style.display = "block"; 
           text.innerHTML = "-";
            
        } 
    }

div#first_product{
width: 50%;
margin-left: 320px;
height: 300px;
background-color: #f1f1f2 !important;
    
}

div#red_head{
background-color: #ed1c24;
height: 40px;
color: #fff;
padding-left: 15px;
line-height: 35px;
}

#onclick{
width: 50%;
height: 30px;
margin-left: 320px;
background-color: #f8f9f9;
border: 1px dashed #afafaf;
border-radius: 5px;
}

<button id='onclick' onclick="toggle_visibility('first_product')">Toggle</button>

<div id="first_product">
    <div id="red_head">
        <p id="menu_title" class ="hidden" onclick="toggle_visibility('first_product')">  Add your first menu item</p>
    </div>
    <h3 id="menu">Menu Section</h3>

    <form name="first_prod" id="first_prod" enctype="multipart/form-data" action="testing.php" method="post" accept-charset="utf-8" >               

        <label id="cat_label" name="cat_label">Name</label>
        <input type="text" id="cat_name" name="cat_name" value="">

        <label id="desc_label" name="desc_label">Description</label>
        <input type="text" id="cat_desc" name="cat_desc" value="">

        <input type="Submit" id="save_first_prod" name="save_first_prod"  value=" + ADD">

它在HTML中完美运行。但是在使用字符串时却没有。顺便说一句，我对我的javascript进行了一些更改，试图解决我的问题

Answer 1

您在循环中创建html，每个产品都有一个按钮。他们都有相同的身份证吗？这可能意味着麻烦。与其他元素相同。 echo("<div id='first_product'>");如果您有多个，请更改它。要么使用类，要么将$ i或其他东西随机添加到所有这些id。

对于按钮文本，您需要定位按钮，而不是产品ID。

Toggle关闭时显示Toggle的完整高度

1 个答案: