Question

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

请参阅下面的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

要深入了解我想要实现的目标，请访问＆＃39; wetransfer.com＆＃39;，＆gt;带我免费＆gt;并使用＆＃39; help＆＃39;按钮切换。

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

提前感谢您的帮助。干杯！

Answer 1

你在这里犯了很多错误：

visibility: hidden;不受show和hide的影响，因此div将保持隐藏状态。你应该删除它。编辑以下评论：display会受到隐藏和显示的影响（如果需要）。
你的按钮和选择器的类是错误的，顺便说一下，不要给同一个按钮隐藏和显示它们同时触发（不完全是，我试试这个）
为测试添加了具有良好类“架构”的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>

Answer 2

我希望这会帮助你:)。

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<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>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

隐藏/显示Div按钮单击不起作用。试过我所知道的一切

2 个答案: