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/

我已将“HTML”内容添加到“.pl”div。

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

在此之后，我将播放列表li的字体颜色更改为＃130606

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

使用这个简单的js

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

切换html5音频切换

1 个答案: