Javascript 单击时将可见性和不透明度更改为div项

我正在开发一个网站，我想在点击一个按钮后显示一个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>

在我的html代码中：

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

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

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

---

但这并不奏效。我知道我遗漏了什么，但我找不到它是什么。非常感谢您的帮助。

请检查此项。我已经更改了html中的

按钮

id，并删除了内联css

$（函数（）{
$（“#视图详细信息”）。单击（函数（）{
$（“.right”）.toggleClass（“右可见”）；
});
$（“#保存详细信息”）。单击（函数（）{
$（“.right”）.removeClass（“右可见”）；
});
});
#对{
宽度：40%；
位置：相对位置；
边框：1px实心#000；
高度：50px；
}
.对{
可见性：隐藏；
不透明度：0；
-webkit转换：可见性1s，不透明度1s线性；
-moz过渡：可见性1s，不透明度1s线性；
-o型过渡：可见度1s，不透明度1s线性；
过渡：可见度1s，不透明度1s线性；
}
.右可见{
不透明度：1；
能见度：可见；
}

保存详细信息
查看详细信息
请检查此项。我已经更改了html中的
按钮
id，并删除了内联css


$（函数（）{
$（“#视图详细信息”）。单击（函数（）{
$（“.right”）.toggleClass（“右可见”）；
});
$（“#保存详细信息”）。单击（函数（）{
$（“.right”）.removeClass（“右可见”）；
});
});
#对{
宽度：40%；
位置：相对位置；
边框：1px实心#000；
高度：50px；
}
.对{
可见性：隐藏；
不透明度：0；
-webkit转换：可见性1s，不透明度1s线性；
-moz过渡：可见性1s，不透明度1s线性；
-o型过渡：可见度1s，不透明度1s线性；
过渡：可见度1s，不透明度1s线性；
}
.右可见{
不透明度：1；
能见度：可见；
}

保存详细信息
查看详细信息
是否检查了浏览器控制台中的错误？如果没有，我建议您先检查。是的，浏览器控制台没有错误。您是否检查了浏览器控制台的错误？如果没有，我建议您先检查一下。是的，浏览器控制台上没有错误。您的答案中似乎缺少更改的详细信息和原因…我更改的一个ID有问题。谢谢因此，我使用viewDetail来显示使用您的答案的div，这是完美的。在右边的div中，有另一个id=“saveDetail”按钮，当用户单击它时，我想将其恢复到原始状态。因此，我在css文件上创建了一个正确的不可见类，并复制了代码并更改了位以进行调整。单击时触发的功能，但不隐藏它。请您更新您的答案，指出这一点，好吗？而且，在1次迭代之后，它不再工作了。它在控制台上显示的输出，但对显示没有影响。您的答案中似乎缺少更改的详细信息和原因…我更改的一个ID有问题。谢谢因此，我使用viewDetail来显示使用您的答案的div，这是完美的。在右边的div中，有另一个id=“saveDetail”按钮，当用户单击它时，我想将其恢复到原始状态。因此，我在css文件上创建了一个正确的不可见类，并复制了代码并更改了位以进行调整。单击时触发的功能，但不隐藏它。请您更新您的答案，指出这一点，好吗？而且，在1次迭代之后，它不再工作了。它在控制台上显示的输出，但对显示器没有影响。
$(function() {
    $("#viewDetail").click(function() {
        $(".right").toggleClass("right-visible");
    });
});

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