При нажатии на картинку, открывается блок со смайлами.
<img src="tmpl/img/smile/smile.png" id="smilesBtn" alt="Смайлы" title="Добавить смайл">
<div id="smiles">
<span>
<img class="smile" src="tmpl/img/smile/1.gif" alt=":)">
</span>
#smiles {
display: none;
position: absolute;
width: 550px;
border: 1px solid #eee;
}
Что бы хотелось:
1. При нажатии на картинку (smile.png) открывается div smiles
2. Если div smiles открыт, то при нажатии на картинку (smile.png) скрывается div smiles
3. При нажатии на картинку в div - smiles, скрывается
4. Если кликнуть в другом месте экрана, div smiles скрывается
Сейчас работает, но куча лишнего кода (много вырезал из другого проекта) и не работает пункт №4. Помогите с данным вопросом
<script type="text/javascript" src="jquery.js"></script>
$(document).ready(function () {
var smiles = $("#smiles");
var inputEl = $("#chatInp");
var smilesBtn = $("#smilesBtn");
$("#smiles span").click(function () {
var shortCode = $.emotions.shortcode($(this).attr("title"));
inputEl.val(inputEl.val() + " " + shortCode + " ");
smiles.toggle();
inputEl.focus();
});
$("#smilesBtn").click(function () {
smiles.toggle();
});
});
(function ($) {
$.emotions = function (text) {
return $.emotions.parse(text);
};
var $t = $.emotions;
$.extend($.emotions, {
settings: {
replacement: '<span title="{eId}" class="emotions emo-{eId}"></span>',
},
shortcode: function(eId){
var $s = $t.settings;
for (var pattern in $s.map) {
if($s.map[pattern] == eId)
return pattern;
}
return "";
},
});
$.fn.emotions = function (action, options) {
this.each(function () {
var el = $(this);
el.html($.emotions(el.html()));
});
};
})(jQuery);