使用複選框ul複製select元素ul（jQuery）

Question

我試圖將一個圖例和一個UL複選框/收音機的字段集轉換爲選擇html元素。我知道，這聽起來很糟糕，沒有任何意義，但我們只是說我必須這樣做。

我有一個的jsfiddle https://jsfiddle.net/demj49st/

的問題是，我有一些問題，複製選擇元素的點擊行爲。我沒有找到正確的選擇器，所以點擊複選框不會讓虛假選擇框消失。

(function($) { 

    $(document).ready(function() { 

     $('fieldset legend').on('click', function() { 
      var $this = $(this); 
      $this.toggleClass('active'); 
      $this.next().toggleClass('visible'); 
     }) 


     $(document).on('click', function (e) { 
      if($('ul').hasClass('visible') && !$('fieldset legend').is(e.target)) { 
       $('ul').removeClass('visible'); 
       $('legend').removeClass('active'); 
      } 
     }); 



    }) 

})(jQuery); 

Answer 1

$(document).ready(function() { 

     $('fieldset legend').on('click', function() { 
      var $this = $(this); 
      $this.toggleClass('active'); 
      $this.next().toggleClass('visible'); 
     }); 


     $(document).on('click', function (e) { 
      if (!$("fieldset > ul , fieldset > legend").is(e.target) // if the target of the click isn't the container... 
       && $("fieldset > ul , fieldset > legend").has(e.target).length === 0) // ... nor a descendant of the container 
      { 

       $('fieldset > ul').removeClass('visible'); 
      } 
     }); 

    }); 

DEMO