切換開關爲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/

你我增加了一個HTML內容的「特等」股利。

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

在此之後，我改變的播放列表裏對＃130606

，然後添加樣式=顯示的字體顏色：無播放列表UL隱藏在它第一次運行。

使用這個簡單的JS

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