Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.06.2013, 11:04
Аватар для Nailya
Кандидат Javascript-наук
Отправить личное сообщение для Nailya Посмотреть профиль Найти все сообщения от Nailya
 
Регистрация: 05.04.2013
Сообщений: 135

как сделать, чтобы при 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');
            	
            }
          ); 
});
Ответить с цитированием
  #2 (permalink)  
Старый 13.06.2013, 11:18
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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');
    }); 
});
Ответить с цитированием
  #3 (permalink)  
Старый 13.06.2013, 11:28
Аватар для Nailya
Кандидат Javascript-наук
Отправить личное сообщение для Nailya Посмотреть профиль Найти все сообщения от Nailya
 
Регистрация: 05.04.2013
Сообщений: 135

этот скрипт при нажатии открывает окно, но при повторном нажатии не закрывает его
Ответить с цитированием
  #4 (permalink)  
Старый 13.06.2013, 11:29
Аватар для Nailya
Кандидат Javascript-наук
Отправить личное сообщение для Nailya Посмотреть профиль Найти все сообщения от Nailya
 
Регистрация: 05.04.2013
Сообщений: 135

как раз в этом и проблема(
Ответить с цитированием
  #5 (permalink)  
Старый 13.06.2013, 11:32
Аватар для Nailya
Кандидат Javascript-наук
Отправить личное сообщение для Nailya Посмотреть профиль Найти все сообщения от Nailya
 
Регистрация: 05.04.2013
Сообщений: 135

Вот еще с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;
 }
Ответить с цитированием
  #6 (permalink)  
Старый 13.06.2013, 12:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

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>

Последний раз редактировалось рони, 13.06.2013 в 13:13.
Ответить с цитированием
  #7 (permalink)  
Старый 13.06.2013, 12:17
Аватар для Nailya
Кандидат Javascript-наук
Отправить личное сообщение для Nailya Посмотреть профиль Найти все сообщения от Nailya
 
Регистрация: 05.04.2013
Сообщений: 135

Здорово! Спасибо,рони, прямо так как хотела
Ответить с цитированием
  #8 (permalink)  
Старый 13.06.2013, 12:35
Аватар для Nailya
Кандидат Javascript-наук
Отправить личное сообщение для Nailya Посмотреть профиль Найти все сообщения от Nailya
 
Регистрация: 05.04.2013
Сообщений: 135

Еще один вопрос, как сделать так, чтобы при нажатии левой клавиши мыши вне этого окна, окно также закрывалось?
Ответить с цитированием
  #9 (permalink)  
Старый 13.06.2013, 13:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Сообщение от Nailya
чтобы при нажатии левой клавиши мыши вне этого окна, окно также закрывалось?
код в 6 посте -- добавил эту возможность.
Ответить с цитированием
  #10 (permalink)  
Старый 13.06.2013, 13:45
Аватар для Nailya
Кандидат Javascript-наук
Отправить личное сообщение для Nailya Посмотреть профиль Найти все сообщения от Nailya
 
Регистрация: 05.04.2013
Сообщений: 135

рони, спасибо огромное, вы мне очень помогли!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать чтобы в popup окне показывалось картинка? sarik Общие вопросы Javascript 31 15.03.2013 13:12
Удаление класса при клике на объект lukingnu jQuery 3 23.04.2012 12:14
Как сделать чтобы textarea тянулась в высоту при добавлении в нее текста? javasc Общие вопросы Javascript 4 27.03.2012 22:14
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Как сделать, чтобы музыка <embed> на странице не играла только при первом посещении? Bad Request Общие вопросы Javascript 22 27.07.2009 19:44