html5 音频的切换开关

Question

我已经尝试了一个星期来在我的播放列表上获得一个切换按钮，但徒劳无功。 它是在带有 html5 标签和标准控件的网页上制作的。

如果我单击 .pl 按钮，播放列表会显示，但再次单击它不会隐藏它。

我很确定我可以找到一些脚本来让它工作，但我正在寻找一个使用现有代码和 css 的优雅解决方案。或者，我可能会在播放列表本身中引入一个新按钮，它会消失。

这是存在的（我通过编辑精灵添加了 .nopl）： css

.pl {background: transparent url("../../images/spr.png") no-repeat scroll -274px -175px;
cursor: pointer;
height: 34px;
    margin-left:85%;
position: absolute;
top: 20px;
width: 10%;
    }
    .pl:hover {top: 21px;}
    .playlist li {color: #EEEEEE;cursor: pointer;margin: 0 0 0 -25%;font-size:10px;}
    .playlist li.active {font-weight: bold;}
    .nopl {
    background: transparent url("../../images/spr.png") no-repeat scroll -227px -174px;
    cursor: pointer;
    height: 34px;
        margin-left:85%;
    position: absolute;
    top: 20px;
    width: 10%;
    }

我的html：

      <div class="content">
      <h1>Listen to past shows... </h1>
      <div class="player">
      <div class="pl"></div>
      <div class="title"></div>
      <div class="artist"></div>
      <div class="cover"></div>
      <div class="controls">
          <div class="play"></div>
          <div class="pause"></div>
          <div class="rew"></div>
          <div class="fwd"></div>
      </div>
      <div class="volume"></div>
      <div class="tracker"></div>
      </div>
      <ul class="playlist hidden">
      <li audiourl="./abc.mp3" cover="cover1.jpg" artist="abc">Date New Years</li>
      </ul>

现有的 main.js：

    // show playlist
    $('.pl').click(function (e) {
        e.preventDefault();
    $('.playlist').fadeIn(300);
    });

我在 main.js 中尝试过的内容：

        function plAudio() {
         $('.pl').click(function (e) {
                e.preventDefault();
             $('.playlist').fadeIn(300);
             $('.pl').addClass('hidden');
             $('.nopl').addClass('visible');
        );}
        function noplAudio() {
         $('.nopl').click(function (e) {
                e.preventDefault();
             $('.playlist').fadeOut(300);
             $('.pl').removeClass('hidden');
             $('.nopl').removeClass('visible');
    });}

所以这个想法只是切换按钮和播放列表的可见性。但这根本不允许显示播放列表。

我也在 main.js 中尝试过：

    // show playlist
    $('.pl').click(function (e) {
        e.preventDefault();
    $('.playlist').fadeIn(300);
    hid=0;
    });
    // hide playlist
    if (hid=0) {
            $('.pl').click(function (e) {
                 e.preventDefault();
    $('.playlist').fadeOut(300);
            hid=1;
    })};

这会在单击后打开和关闭播放列表，我想我明白了。 有什么建议吗？

Answer 1

试试这个小提琴http://jsfiddle.net/s3NKd/1/

你我已经在 '.pl' div 中添加了一个 HTML 内容。

   <div class="pl">Show play list</div>

之后我将播放列表 li 的字体颜色更改为 #130606

然后将 style=display:none 添加到播放列表 ul 以在第一次运行时将其隐藏。

用了这个简单的js

      $('.pl').click(function (e) {
         e.preventDefault();
         $('.playlist').fadeToggle(300);
      });