我怎样才能让这个滑块工作？

Question

如何让这段代码滑出？当我单击按钮时，div 滑出，但按钮本身不会移动。另外如何让图像和文本形成两列？使用我的 IDE 时，它显示为两列，但在我的网站上却没有。

谢谢！

$(document).ready(function() {
  $('.rec-anime-button').click(function() {
    if (parseInt($('.rec-anime-list-container').css('right')) < 0) {
      $('.rec-anime-list-container').css('right', '5px');
      $('.rec-anime-button').css('right', '500');
    } else {
      $('.rec-anime-list-container').css('right', '-490px');
      $('.rec-anime-button').css('right', '0');
    }
  });
});

.rec-anime-button {
  position: fixed;
  margin-top: 100px;
  right: 0;
  z-index: 1000000;
}
.rec-anime-list-container {
  position: fixed;
  margin-top: 100px;
  right: -490px;
  text-decoration: none;
  transition: right 300ms ease-in-out;
  z-index: 1000000;
}
.rec-anime-list {
  max-width: 480px;
  text-decoration: none;
}
.container li {
  float: left;
  width: 230px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-decoration: none;
}
.column {
  display: inline-block;
  vertical-align: middle
}
.rec-anime-title {
  margin-top: 0;
  color: gray;
  width: 100px;
}
.sub {
  color: blue;
  font-size: 16px;
}
.dub {
  color: red;
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Recommended Anime Slider -->
<div class="rec-anime-button">
  <img src="/Rec-Anime-button.png">
</div>
<div class="rec-anime-list-container">
  <ul class="rec-anime-list container">
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120xTITLE80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
  </ul>
</div>

Answer 1

尝试 below:I 为每个 li 添加 table 和在 js 中设置按钮样式时指定 px 的小修改 pf。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="rec-anime-button">
  <img src="http://static1.squarespace.com/static/51c4ae45e4b0e3594ecb840f/t/522e3eb4e4b0c5d6fd5ef60a/1378762451958/ARKHAM_Animation+Curve+Icon.png" style="width:80px;height:80px;">
</div>
<div class="rec-anime-list-container">
  <ul class="rec-anime-list container">
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
      </td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120xTITLE80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li></td></tr></table>
  </ul>
</div>

<script>

$(document).ready(function() {
   $('.rec-anime-button').click(function() {
     if (parseInt($('.rec-anime-list-container').css('right')) < 0) {
       $('.rec-anime-list-container').css('right', '5px');
       $('.rec-anime-button').css('right', '500px');//use px
     } else {
       $('.rec-anime-list-container').css('right', '-490px');
       $('.rec-anime-button').css('right', '0px');//use px
     }
   });
 });
</script>
<style>
.rec-anime-button {
  position: fixed;
  margin-top: 100px;
  right: 0;
  z-index: 1000000;
}
.rec-anime-list-container {
  position: fixed;
  margin-top: 100px;
  right: -490px;
  text-decoration: none;
  transition: right 300ms ease-in-out;
  z-index: 1000000;
}
.rec-anime-list {
  max-width: 480px;
  text-decoration: none;
}
.container li {
  float: left;
  width: 230px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-decoration: none;
}
.column {
  display: inline-block;
  vertical-align: middle
}
.rec-anime-title {
  margin-top: 0;
  color: gray;
  width: 100px;
}
.sub {
  color: blue;
  font-size: 16px;
}
.dub {
  color: red;
  font-size: 16px;
}
ul{ 
  list-style-type: none;
}
</style>

我怎样才能让这个滑块工作？

How can I get this slider to work?

html

javascript

css

bxslider