Question

所以我在网站上工作，我需要左侧和右侧的抽屉。首先，我做了左边的一个，似乎工作得很好所以我决定复制它并更改名称和CSS，以使相同的一个出现在右侧，但它没有显示我可能犯了一个小错误，我可能做了一个大错，但我找不到它。希望有些人可以帮助我解决这个问题。它实际上是窗口左角的一个X，它在抽屉里滑动信息，同样的东西也应该在右侧。

anualidad

$(document).ready(function() {
  $(".trigger-left").click(function() {
    $(".panel-slide-left").toggle("fast");
    $(this).toggleClass("active");
    return false;
  });
});
$(document).ready(function() {
  $(".trigger-right").click(function() {
    $(".panel-slide-right").toggle("fast");
    $(this).toggleClass("active");
    return false;
  });
});

.panel-slide-right {
  position: absolute;
  right: 0;
  display: none;
  background-color: #edf2f4;
  width: 330px;
  height: 100%;
  padding-left: 50px;
  padding-top: 50px;
}
.panel-slide-left p {
  margin: 0 0 15px;
  padding: 0;
  color: #ccc;
}
.panel-slide-right p {
  margin: 0 0 15px;
  padding: 0;
  color: #ccc;
}
.panel-slide-left a:hover,
.panel-slide-left a:visited:hover {
  margin: 0;
  padding: 0;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;
}
.panel-slide-left a:hover,
.panel-slide-left a:visited:hover {
  margin: 0;
  padding: 0;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;
}
a.trigger-left {
  position: absolute;
  text-decoration: none;
  top: 50px;
  left: 0;
  font-size: 16px;
  letter-spacing: -1px;
  font-family: verdana, helvetica, arial, sans-serif;
  color: #fff;
  padding-left: 20px;
  font-weight: 700;
  display: block;
}
a.trigger-right {
  position: absolute;
  top: 50px;
  right: 0;
  top: 50px;
  left: 0;
  font-size: 16px;
  letter-spacing: -1px;
  font-family: verdana, helvetica, arial, sans-serif;
  color: #fff;
  padding-left: 20px;
  font-weight: 700;
  display: block;
}
a.trigger-left:hover {
  position: absolute;
  text-decoration: none;
  top: 50px;
  left: 0;
  font-size: 16px;
  letter-spacing: -1px;
  font-family: verdana, helvetica, arial, sans-serif;
  color: #fff;
  padding-left: 20px;
  font-weight: 700;
  display: block;
  height: 50px;
}
a.trigger-right:hover {
  position: absolute;
  text-decoration: none;
  top: 50px;
  right: 0;
  font-size: 16px;
  letter-spacing: -1px;
  font-family: verdana, helvetica, arial, sans-serif;
  color: #fff;
  padding-left: 20px;
  font-weight: 700;
  display: block;
  height: 50px;
}
a.active.trigger-left {
  color: #fff;
}
a.active.trigger-right {
  color: #fff;
}

Answer 1

您的代码段效果不佳，很难为您解决。但我想如果你将所有内容都移到一个$(document).ready(function() {

中它会起作用

在clear-fix之后，您还错过了右侧面板上的结束div。实际上这可能是问题所在。

Answer 2

我简化了代码并修复了一些错误。

＆＃13;

$(document).ready(function() {
  $(".trigger-left").click(function() {
    $(".panel-slide-left").toggle("fast");
    $(this).toggleClass("active");
    return false;
  });

  $(".trigger-right").click(function() {
    $(".panel-slide-right").toggle("fast");
    $(this).toggleClass("active");
    return false;
  });
});

＆＃13;

.columns {
  padding: 50px;
}
label > h5 {
  display: inline-block;
}

.panel-slide-left,
.panel-slide-right {
  position: absolute;
  display: none;
  background-color: #edf2f4;
  width: 330px;
  height: 100%;
  top: 0;
}
.panel-slide-left {
  left: 0;
}
.panel-slide-right {
  right: 0;
}

.panel-slide-left p,
.panel-slide-right p {
  margin: 0 0 15px;
  padding: 0;
  color: #ccc;
}

.panel-slide-left a:hover,
.panel-slide-left a:visited:hover,
.panel-slide-right a:hover,
.panel-slide-right a:visited:hover {
  margin: 0;
  padding: 0;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;
}

a.trigger-left,
a.trigger-left:hover,
a.trigger-right,
a.trigger-right:hover {
  position: absolute;
  text-decoration: none;
  top: 50px;
  font-size: 16px;
  letter-spacing: -1px;
  font-family: verdana, helvetica, arial, sans-serif;
  font-weight: 700;
  display: block;
}
a.trigger-left,
a.trigger-left:hover {
  left: 0;
  padding-left: 20px;
}
a.trigger-right,
a.trigger-right:hover {
  right: 0;
  padding-right: 20px;
}

a.active.trigger-left,
a.active.trigger-right {
  color: #fff;
}

＆＃13;

<div class="panel-slide-left">
  <div class="columns">
    <div class="colcenter">
      <div class="checkbox">
        <label>
          <input type="checkbox" value="">
          <h5>Broadcast Language English</h5>
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="">
          <h5>Stream Language English</h5>
        </label>
      </div>
    </div>
  </div>
</div>
<a class="trigger-left" href="#">X</a>

<div class="panel-slide-right">
  <div class="columns">
    <div class="colcenter">
      <div class="checkbox">
        <label>
          <input type="checkbox" value="">
          <h5>Broadcast Language English</h5>
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="">
          <h5>Stream Language English</h5>
        </label>
      </div>
    </div>
  </div>
</div>
<a class="trigger-right" href="#">X</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

滑块没有出现

2 个答案: