Question

我在一个简单的网页上有一个显示/隐藏按钮，默认情况下调用脚本取消隐藏display:none;的文本，同时用“隐藏”替换“显示”按钮。

然而，在某些浏览器（最常见的是移动浏览器）上，当我点击显示时，该按钮会丢失它的样式属性并且无法正常工作。

这是html：

<div id="description">
   <div class="showHide">
    <input id="showbox" type="button" onclick="show()" value="Show App Description" />
    <input id="hidebox" type="button" onclick="hide()" value="Hide Description" />
    </div>
    <div id="descText">
        <p>Description Text that is to be shown on click</p>
    </div>
</div>

脚本：

<script>
function show() {
    document.getElementById('descText').style.display = "block";
    document.getElementById('hidebox').style.display = "block";
    document.getElementById('showbox').style.display = "none";
}
function hide() {
    document.getElementById('descText').style.display = "none";
    document.getElementById('hidebox').style.display = "none";
    document.getElementById('showbox').style.display = "block";
}
</script>

和css：

 #descText {
    display:none;
    border-bottom-style:solid;
    border-width:2px;
    border-color:#CCC;
    margin:0px;
    padding:0px 7px;
}
.showHide {
    width:100%;
    margin:0px;
}

input#hidebox {
    display:none;
    margin-left:auto;
    margin-right:auto;
}

input#showbox {
    dispay:block;
    margin-left:auto;
    margin-right:auto;
}

input[type=button] {
    background-color:transparent;
    font:inherit;
    color:#999;
    width:100%;
    padding:15px 0px;
    border-style:solid;
    border-left-width:1px;
}

input[type=button]:hover {
    background-color:#F60;
    color:#FFF;
}

我完全失去了，我甚至无法确定问题所在！

提前感谢您的帮助。

Answer 1

jQuery可以更容易和跨浏览器兼容。

http://jsfiddle.net/gRha8/

我添加了下滑效果。如果您不想要，可以使用 .show（）;

替换

<div id="description">
    <div class="showHide">
        <input id="showbox" type="button" value="Show App Description" />
        <input id="hidebox" type="button" value="Hide Description" />
    </div>
    <div id="descText">
        <p>Description Text that is to be shown on click</p>
    </div>
</div>

$(function () {
    $('#showbox').click(function () {
        $('#descText').slideDown();
        $('#hidebox').slideDown();
        $('#showbox').hide();
    });

    $('#hidebox').click(function () {
        $('#descText').hide();
        $('#hidebox').hide();
        $('#showbox').slideDown();
    });
});

Answer 2

当你点击它们时，它们会失去样式属性吗？单击它们后，将它们的显示设置为无，因此它们会消失。这对jQuery btw来说要容易得多。它的代码是：

$(document).ready(function() {
    $("#showBox").show();
    $("#hideBox").hide();

    $("#showBox").click(function() {
        $("#descText").show();
        $("#hideBox").show();
        $("#showBox").hide();
    });

    $("#hideBox").click(function() {
        $("#descText").hide();
        $("#hideBox").hide();
        $("#showBox").show();
    });
});

Simples？这样它在javascript / jquery中完成，你可以让css只是简单地设置按钮样式而没有别的！然后，您只需要将jquery库链接到您的网页。一个简单的谷歌搜索将告诉你如何做到这一点。

单击时，“显示/隐藏”按钮会在某些浏览器上丢失样式

2 个答案: