Javascript不适用于最大/最小按钮？答案

【问题标题】：Javascript is not working for max/min button?Javascript不适用于最大/最小按钮？
【发布时间】：2017-12-05 04:57:42
【问题描述】：

我正在做最大化/最小化按钮功能。我的 javascript 代码不起作用。建议我任何解决方案。提前致谢。

这是我的代码

<html>
<head>
<script>
$(function () {
   $(".button-open").hide();
   $(".button-close").bind("click", function () {
     $(".box").hide(100);        

     if ($(this).attr("class") == "button-close")
     {
       $(".button-open").show();
     }
  });
});

$(".button-open").bind("click", function () {
  $(".box").show(100);        
  if ($(this).attr("class") == "button-open")
  {
    $(".button-open").hide();
  }
});
</script>
</head>
<body>
<div class="button-open">Open</div>
<div class="box">
<div class="button-close">X</div>
</div>
</body>
</html>

【问题讨论】：

这将要求您链接到 jQuery 库，因为您正在使用 jQuery 使用 .toggle() 之类的东西而不是交换会不会更容易类并绑定两个事件侦听器，您似乎也缺少类属性更改“假设您希望允许客户端在关闭时打开/显示该元素或在打开时关闭它”

标签： javascript php jquery html css

【解决方案1】：

在使用 JQuery 语法之前，请务必记住包含 JQuery 文件。如果您不想使用 JQuery，那么您需要编写纯 Javascript。但是，如果您只是在 HTML 中引用 JQuery，这对您来说将是一个简单的解决方法。

$(function () {
$(".box").hide(); 
$(".button-close").bind("click", function () {
$(".box").hide(100);        

if ($(this).attr("class") == "button-close")
{
  $(".button-open").show();
}
});
});

$(".button-open").bind("click", function () {
$(".box").show(100);        
if ($(this).attr("class") == "button-open")
{
  $(".button-open").hide();
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-open">Open</div>
<div class="box">
<div class="button-close">X</div>

【讨论】：

它的工作原理！！谢谢，但我想先打开按钮。建议我怎么做。
这很简单。我已经编辑了我的答案，请检查，如果这是你想要的，也请投票。
很高兴为您提供帮助。

【解决方案2】：

在脚本之前添加 jquery 库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

【讨论】：

为什么最好将它添加到body标签的末尾？只要您在运行脚本之前包含该库，它就不会产生任何影响。在页面内容之后添加脚本通常在人们不知道或不想使用 DOM 就绪事件但 OP 的源代码显然使用jQuery 提供的 DOM 就绪功能时完成@ - @987654323 @
我同意@NewToJS。 wahdan 的音符没有任何意义。
是的，它可以工作，但是当运行我的代码时，X 先出现，但我想先打开按钮，该怎么做？
@NewToJS @AKA 我完全同意你的看法，但是很多开发者忘记添加$(function(){ }); 会导致意外错误
@wahdan 那么他们最好不要忘记使用这些基本功能，并且那些开发人员应该在使用它们之前阅读这些库/插件的文档。我仍然认为这不能证明这种最佳做法的合理性。