как сделать, чтобы при 2-м клике объект закрывался
Всем добрый день!
У меня такая задача,при нажатии на ссылку выпадает окно,а при повторном нажатии нужно, чтобы окно закрывалось... у меня же при первом клике открывается и закрывается сразу
<div class="field">
<ul>
<li><a href="#">Оставить отзыв</a>
<ul>
<li><div id="field"><span id="close">x</span>
<span>Имя</span>
<form action="com.php" method="POST">
<input class="author" id="author" type="text" name="author"/><br/>
<span>Отзыв</span>
<textarea class="com" id="comment" name="comment" cols="30" rows="8"></textarea>
<input class="button" name="button" type="submit" onclick="moderation_0()" value="Отправить" />
</form>
</div><!-- end id="field" -->
</li>
</ul>
</li>
</ul>
</div><!-- end class="field" -->
$(function(){
$('.field ul li').click(
function() {
$(this).find('ul').stop(true, true);
$(this).find('ul').slideDown();
}
),
$('.field ul li').click(
function(){
$(this).find('ul').slideUp('slow');
}
);
});
|
var flag = true;
$(function(){
if(flag) $('.field ul li').click(function()
{
flag = false;
$(this).find('ul').stop(true, true);
$(this).find('ul').slideDown();
});
else $('.field ul li').click(unction()
{
flag = true;
$(this).find('ul').slideUp('slow');
});
});
|
этот скрипт при нажатии открывает окно, но при повторном нажатии не закрывает его
|
как раз в этом и проблема(
|
Вот еще сss к нему, чтобы было наглядней
#field{
width:320px;
border:1px solid #e9eaed;
background:#fdfdfd url(/comment/img/logo2.png) no-repeat 98% 3%;
}
.button{
border:2px solid #bfc7d7;
background:#6182c2;
margin:10px 10px;
color:#edf0f6;
font-weight:bold;
cursor:pointer;
padding:3px 5px 3px;
}
.button:hover{
background:#6d8ac6;
}
.author{
margin-left:8px;
border:2px solid #e9eaed;
}
.com{
margin-left:8px;
border:2px solid #e9eaed;
}
#close{
margin:-50px 320px;
padding:1px 3px;
background:pink;
}
span{
margin:8px;
color:#898787;
font-weight: bold;
font-size:12px;
}
/***********************************slider******************************************/
.field{margin:0 -40px;}
.field ul li {
position:relative;
list-style:none;
display: inline;
}
.field ul li a{
text-decoration: none;
background:#fdfdfd;
padding:3px 5px;
border-top:1px solid #e9eaed;
border-right:1px solid #e9eaed;
border-left:1px solid #e9eaed;
color: #777777;
}
.field ul ul {
display: none;
position:absolute;
top:24px;
left:-40px;
}
|
Nailya,
Вариант...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
#field {
width:320px;
border:1px solid #e9eaed;
background:#fdfdfd url(/comment/img/logo2.png) no-repeat 98% 3%;
}
.button {
border:2px solid #bfc7d7;
background:#6182c2;
margin:10px 10px;
color:#edf0f6;
font-weight:bold;
cursor:pointer;
padding:3px 5px 3px;
}
.button:hover {
background:#6d8ac6;
}
.author {
margin-left:8px;
border:2px solid #e9eaed;
}
.com {
margin-left:8px;
border:2px solid #e9eaed;
}
#close {
margin:-50px 320px;
padding:1px 3px;
background:pink;
}
span {
margin:8px;
color:#898787;
font-weight: bold;
font-size:12px;
}
/***********************************slider******************************************/
.field {
margin:0 -40px;
}
.field ul li {
position:relative;
list-style:none;
display: inline;
}
.field ul li a {
text-decoration: none;
background:#fdfdfd;
padding:3px 5px;
border-top:1px solid #e9eaed;
border-right:1px solid #e9eaed;
border-left:1px solid #e9eaed;
color: #777777;
}
.field ul ul {
display: none;
position:absolute;
top:24px;
left:-40px;
}
</style>
<script>
$(function () {
var ul = $('.field ul ul')
$('.field a, #close').click(function () {
ul.slideToggle();
})
$('html').click(function (event) {
if($(event.target).parents(".field").size()) return;
ul.slideUp();
});
});
</script>
</head>
<body>
<div class="field">
<ul>
<li><a href="#">Оставить отзыв</a>
<ul>
<li>
<div id="field"><span id="close">x</span>
<span>Имя</span>
<form action="com.php" method="POST">
<input class="author" id="author" type="text" name="author" />
<br/> <span>Отзыв</span>
<textarea class="com" id="comment" name="comment" cols="30" rows="8"></textarea>
<input class="button" name="button" type="submit" onclick="moderation_0()" value="Отправить" />
</form>
</div>
<!-- end id="field" -->
</li>
</ul>
</li>
</ul>
</div>
<!-- end class="field" -->
</body>
</html>
|
Здорово! Спасибо,рони, прямо так как хотела
|
Еще один вопрос, как сделать так, чтобы при нажатии левой клавиши мыши вне этого окна, окно также закрывалось?
|
Цитата:
|
рони, спасибо огромное, вы мне очень помогли!
|
| Часовой пояс GMT +3, время: 23:27. |