Question

我正在做并展示功能我尝试了一些方案，但它没有用，请让我知道我做错了什么。

我的代码：

function showButtons() {

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

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

让我知道我需要做出的改变

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

Answer 1

问题在于，每次调用函数showButtons时，每次都会绑定额外的2个点击事件（所以点击链接2次，总共会有4个事件）。并且您的代码会同时显示和隐藏元素。

你需要切换它：

＆＃13;

$(document).ready(function() {
  $('#view').click(function() {
    $('#allversion').slideToggle();
  });
});

＆＃13;

#allversion {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="view">View More</a>
<div id="allversion">VISIBLE!</div>

＆＃13;

Answer 2

这适用于我。

<!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>

Answer 3

我建议您使用toggle方法。问题是您必须使用一个click事件处理程序。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allversion" >
   SOME DISPLY CODE HERE
</div>
<a id="view">View More</a>

＆＃13;

Answer 4

更改为以下代码，它应该可以正常工作。

<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;
   }
});

您也可以使用.toggle（）切换可见性。

<a id="view">View More</a>

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

Answer 5

您不需要拨打onclick =＆＃34; showButtons（）＆＃34;事件。您可以轻松地隐藏和显示您的部分：

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

Answer 6

您可以按照他人的建议使用切换，也可以尝试使用

$("#view").click(function(){
if($("#allversion").hasClass('show'))
{
  $("#allversion").removeClass('show').addClass('hide');

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

}

Answer 7

根据您的问题“我的代码为什么不起作用？”。

如果您的代码与您网站上的代码完全相同，则无法正常运行，因为脚本在加载DOM之前正在初始化。

将脚本移动到页面底部或将其放入

$(document).ready(function(){
    //Code goes here
});

隐藏和显示功能无效

7 个答案: