Question

我正在开发一个网站，我想在点击一个按钮后显示一个div。现在，我可以隐藏和显示何时单击按钮：

<button type="submit" id="appendData" onclick="viewDetail()">View Detail</button>

<div id="right" style="display:none">
            <button type="submit" id="saveDetail" onclick="saveDetail()">Save details</button>
        </div>

<script>
    function viewDetail(){
        document.getElementById('right').style.display = "inline-block";
    }
    function saveDetail(){
        document.getElementById('right').style.display = "none";
    }

</script>

现在，这没关系，但是因为这是一个webapp，它被用来部署给我的所有同事，我希望它看起来很好并且使用起来很顺畅，所以，我想添加一个过渡到DIV。我已经google了很多，我看到一些有用的例子，但不是我想要的方式。我想改变它的可见性和不透明度，或者从像android材料设计那样的角落成长。

现在，在我的css文件中，我已经定义了这个：

#right {
    width: 40%;
    position: relative;
}
.right {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 1s, opacity 1s linear;
    -moz-transition: visibility 1s, opacity 1s linear;
    -o-transition: visibility 1s, opacity 1s linear;
    transition: visibility 1s, opacity 1s linear;
}
.right-visible {
    visibility: visible;
    opacity: 1;
}

而且，在我的HTML代码中：

<div id="right" style="display:none" class="right" >
            <button type="submit" id="saveDetail" onclick="saveDetail()">Save details</button>

并处理按钮上的点击：

$(function() {
    $("#viewDetail").click(function() {
        $(".right").toggleClass("right-visible");
    });
});

但是，它没有进入函数来执行toggleClass命令。我也试过了：

function saveDetail(){
    $(".right").toggleClass("right");
}
function viewDetail(){
    $(".right").toggleClass("right-visible");
}

但这也不行。我知道我错过了什么，但我找不到它是什么。将不胜感激任何帮助。

Answer 1

请检查一下。我在html中更改了button id并删除了内联css。

＆＃13;

$(function() {
    $("#viewDetail").click(function() {
        $(".right").toggleClass("right-visible");
    });
     $("#saveDetail").click(function() {
        $(".right").removeClass("right-visible");
    });
});

＆＃13;

#right {
    width: 40%;
    position: relative;
    border:1px solid #000;
    height:50px;
}
.right {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 1s, opacity 1s linear;
    -moz-transition: visibility 1s, opacity 1s linear;
    -o-transition: visibility 1s, opacity 1s linear;
    transition: visibility 1s, opacity 1s linear;
}
.right-visible{
    opacity:1;
    visibility: visible;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="right" class="right" >
  <button type="submit" id="saveDetail">Save details</button>
</div>
<button type="submit" id="viewDetail">View details</button>

＆＃13;

在onclick上将可见性和不透明度更改为div项目

1 个答案: