html5音频切换开关

一周来，我一直试图在播放列表上设置切换按钮，但都没有成功。 它是在带有html5标签和标准控件的网页上制作的

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

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

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

我的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中尝试的内容：

        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');
    });}

    // 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;
    })};

因此，我们的想法是切换按钮和播放列表的可见性。但这根本不允许播放列表出现

我还尝试了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');
    });}

    // 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;
    })};

点击一下就可以打开和关闭播放列表，我想我明白原因了。 有什么建议吗？

试试这把小提琴

您已经向“.pl”div添加了一个HTML内容

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

---

我还试图复制静音行为，但没有效果。请对此进行处理。首先，您的单击事件被分配给没有高度或宽度的对象。是一个空的div，所以如果你期待一个关于“聆听过去的节目…”的活动，那是不会发生的。欢迎你。尽量广泛使用控制台。这是js开发人员的主要任务。：）非常感谢你！非常感谢，问题解决了！双柱。我试着投票支持你，但我的支持率太低了。再次感谢，我会照你的建议去做。

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