jquery - 单击按钮时隐藏/显示 Div 不起作用。尝试了我所知道的一切

Question

我是编程的新手，我在旅途中学习。到目前为止，我已经能够解决所有问题，但我似乎无法破解单击按钮时使 Div 滑入和滑出页面的代码。我已经尝试了所有我能找到的解决方案，包括但仍然无法解决这个问题。

请看下面我的代码:

(function($) {
  $(".a").click(function() {
    $(".architecture").show('slide', {
      direction: 'right'
    }, 800);
  });
})(jQuery);

(function($) {
  $('.closea').click(function() {
    $('.architecture').hide('slide', {
      direction: 'right'
    }, 800);
  });
})(jQuery);

.architecture {
  visibility: hidden;
  background-color: white;
  position: fixed;
  bottom: 0;
  top: 0;
  right: 0;
  width: 44%;
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.25);
}

<button class="content" class="a">Architecture</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

要深入了解我要实现的目标，请访问“wetransfer.com”>Take me to free> 并使用“帮助”按钮切换。

我知道这并不理想，但我在 html 文件中包含了 jQuery，因为每次我尝试使用 .js 文件时，Brackets 都会向我显示错误。如果有人知道如何纠正这个问题，请也让我知道。我听说将 jQuery 放入 html 是一个坏习惯。

在此先感谢您的帮助。干杯!

Answer 1

你这里有很多问题:

• visibility: hidden; 不受显示和隐藏的影响，据我所知，因此 div 将保持隐藏状态。你应该删除它。编辑以下评论:display 受 hide and show 影响(如果需要)。
• 你的按钮和选择器的类是错误的，顺便说一句，不要给同一个按钮隐藏和显示，因为它们会同时触发(不完全是，我让你试试这个)
• 为测试添加了具有良好“架构”类的 div

(function($) {
  $(".a").click(function() {
    $(".architecture").show('slide', {
      direction: 'right'
    }, 800);
  });
})(jQuery);

(function($) {
  $('.b').click(function() {
    $('.architecture').hide('slide', {
      direction: 'right'
    }, 800);
  });
})(jQuery);

.architecture {
  /*visibility: hidden;*/
  display: none;
  background-color: white;
  position: fixed;
  bottom: 0;
  top: 0;
  right: 0;
  width: 44%;
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.25);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<button class="content a">show</button>
<button class="content b">hide</button>

<div class="architecture" style="width: 400px; height: 400px; border: 1px dotted red;">&nbsp;</div>