Как закрывать работу скрипта по нажатию в любом месте?

Question

[Иван Сохин]

Как в этом скрипте сделать так, что бы можно было скрывать элемент не кнопкой, а по нажатию в любом месте на странице, и при этом можно открыть только один элемент, если нажать на другой, то первый автоматически скрывается?

Answer 1

[Сергей delphinpro]

jsfiddle.net/DelphinPRO/Lp4d9n7z/1
Подойдет?

Comments

[Сергей delphinpro]

можно убрать пару строк jsfiddle.net/DelphinPRO/Lp4d9n7z/2

[Иван Сохин]

Сергей: Выглядит как надо, но у меня проблема - я использую этот скрипт между , и когда нажать или ок или как в этом методе, то у меня страница сразу обновляется. Как исправить?

[Сергей delphinpro]

Иван Сохин: Переформулируйте вопрос. Пока непонятно.

[Иван Сохин]

Сергей: У меня есть страница, которая вызывает через ajax другую страницу, в которой присутствуют эти самые инпуты со скриптом. Это выглядит примерно так:

<?php
// код
// скрипт ajax
<form method='post'>
<div></div> // блок в котором подгружается следующий файл с input'ами.
</form>
// код
?>

Вроде так. И в скрипте присутствует кнопка - , при нажатии которой, у меня почему то срабатывает отправка форм и страница обновляется. Причем в базу ничего не заносится. И еще не понимаю почему обновляется страница, если у меня в коде написано:

if(isset($_POST['name'])) {
// код
}

а у кнопки вообще нет name. И все равно срабатывает форма. Я чего-то не понимаю

[Сергей delphinpro]

Любая кнопка, кроме type=reset будет отправлять форму, если кнопка находится внутри формы.
Решения.
- заменить кнопку на другой элемент, оформленный внешне под кнопку.
- повесить на кнопку js-обработчик, внутри которого вызывать .preventDefault() (или просто return false;)

В базу ничего не заносится из-за вашего условия как раз. Ведь у нажатой кнопки нет атрибута name.

[Сергей delphinpro]

А может и вру :) попробуйте добавить кнопкам type="button"
Тогда они, в принципе, не должны будут восприниматься как сабмиты.

[Иван Сохин]

Сергей: Спасибо разобрался) Завтра буду прикручивать это к скрипту

Answer 2

[Александр]

Тема вроде закрыта, но попробую все же внести свою лепту.

<div class="snippet">
    <p class="show red">your php variable</p>
    <i>
        <input type="text" value="your php variable">
        <button class="hide">OK</button>
    </i>
</div>
<div class="snippet">
<p class="show green">your php variable</p><i><input type="text" value="your php variable"><button class="hide">OK</button></i>
</div>
<div class="snippet">
<p class="show blue">your php variable</p><i><input type="text" value="your php variable"><button class="hide">OK</button></i>
</div>

$(document).ready(function() {
    $("i").hide();
    var allsnippet = $(".snippet");
    $(".snippet").on("click",function(e){
        var snippet = this;
        e.stopPropagation();
        $(".snippet").each(function(){
            if(this == snippet){
                $(this).children("p").hide();
                $(this).children("i").show();
            }
            else{
                $(this).children("p").show();
                $(this).children("i").hide();
            }
        });
    });
    $(document).on("click",function(){
        allsnippet.each(function(){
            $(this).children("p").show();
            $(this).children("i").hide();
        });
    });
});