Javascript 隐藏和显示功能不起作用_Javascript_Jquery

Javascript 隐藏和显示功能不起作用

javascript jquery

Javascript 隐藏和显示功能不起作用,javascript,jquery,Javascript,Jquery,我正在做并展示我尝试过的功能，但它不起作用，请让我知道我犯了什么错误我的代码： function showButtons() { $("#view").click(function(){ $("#allversion").show(); }); $("#view").click(function(){ $("#allversion").hide(); }); } <div id="allversion" style="

我正在做并展示我尝试过的功能，但它不起作用，请让我知道我犯了什么错误

我的代码：

function showButtons() {

    $("#view").click(function(){
        $("#allversion").show();
    });
    $("#view").click(function(){
        $("#allversion").hide();
    });
}

<div id="allversion" style="display:none">
   SOME DISPLY CODE HERE
</div>

函数showButtons（）{
$（“#视图”）。单击（函数（）{
$（“#所有版本”）.show（）；
});
$（“#视图”）。单击（函数（）{
$（“#所有版本”）.hide（）；
});
}
这里有一些显示代码

让我知道我需要做的更改

<a onclick="showButtons()" id="view">View More</a>

查看更多信息

这对我很有效

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showButtons() {


        $("#allversion").toggle();

}

</script>
</head>
<body>

<div id="allversion" >
   SOME DISPLY CODE HERE
</div>

<a onclick="showButtons()" id="view">View More</a>
</body>
</html>


函数showButtons（）{
$（“#所有版本”）.toggle（）；
}
这里有一些显示代码
查看更多

我建议您使用

切换方法。问题是您必须使用一个单击事件处理程序。
$（“#视图”）。单击（函数（e）{
$（“#所有版本”）.toggle（）；
});

这里有一些显示代码
查看更多
问题在于，每次调用函数showButtons
时，都会绑定额外的2个单击事件（因此，单击链接2次，总共会有4个事件）。代码同时显示和隐藏元素
您需要切换它：

$（文档）.ready（函数（）{
$（'#视图'）。单击（函数（）{
$（“#所有版本”）.slideToggle（）；
});
});
#所有版本{
显示：无；
}

查看更多
看得见更改为以下代码，它应该可以工作
<a id="view">View More</a>

var isClicked = false;
$( "#view" ).click(function() {
   if (isClicked == true) {
   $("#allversion").css("display", "none");
   isClicked = false;
   }
   else {
   $("#allversion").css("display", "inline");
   isClicked = true;
   }
});

查看更多信息
var isClicked=false；
$（“#视图”）。单击（函数（）{
如果（isClicked==真）{
$（“所有版本”）.css（“显示”、“无”）；
isClicked=false；
}
否则{
$（“所有版本”）.css（“显示”、“内联”）；
isClicked=true；
}
});

还可以使用.toggle（）切换可见性
<a id="view">View More</a>

$( "#view" ).click(function() {
   $("#allversion").toggle();
});

查看更多信息
$（“#视图”）。单击（函数（）{
$（“#所有版本”）.toggle（）；
});
您不需要为此调用onclick=“showButtons（）”事件。您可以很容易地隐藏和显示分区，如下所示：
$(document).ready(function(){
    $("#view").click(function(){
        $("#allversion").toggle();
    });
});

您可以按照其他人的建议使用切换，也可以尝试此操作
$("#view").click(function(){
if($("#allversion").hasClass('show'))
{
  $("#allversion").removeClass('show').addClass('hide');

}
else
{
  $("#allversion").removeClass('hide').addClass('show');

}

根据你的问题“为什么我的代码不起作用？”
如果您的代码与站点上的代码完全相同，那么它将无法工作，因为脚本在加载DOM之前正在初始化
将脚本移动到页面底部或将其放入
$(document).ready(function(){
    //Code goes here
});

请使用编辑器脚本片段。很好的例子，你的代码应该可以工作。您的问题可能是您的脚本在DOM之前运行。将脚本移动到页面底部或将其封装在$（document）、ready（function（）{}）中；