выпадающий список img

by Qwerty_Wasd

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <a id="link1" href="#">выпадающий список</a>
<div id="content1" style="display: none;">
 <label>
  <img src="http://cyberstatic.net/images/cyberforum_logo.png" alt="">
  <input type="radio" name="group1" />
</label>
  <label>
  <img src="http://cyberstatic.net/images/cyberforum_logo.png" alt="">
  <input type="radio"  name="group1" />
</label>
</div>

CSS

label {
      display: block;
}
[type="radio"]{
  display:none;
}
img:hover{
	cursor:pointer;
}

JavaScript

$(document).ready(function () {
        $('a#link1').click(function (e) {
            $(this).toggleClass('active');
            $('#content1').toggle();
                 
            e.stopPropagation();
        });
 
        $('body').click(function () {
            var link = $('a#link1');
            if (link.hasClass('active')) {
                link.click();
            }
        });
    });