Унифицируйте JQuery Script и встроите проверку

Question

Я пытаюсь немного объединить этот сценарий .. Они оба делают почти одно и то же.

При нажатии кнопки открывается окно. Это может быть сложно, но я не хочу, чтобы это происходило, когда один ящик открыт (определяется как #signincontainer и #searchcontainer). Я не хочу, чтобы другой тоже мог открываться. Я не достаточно хорош, чтобы быть в состоянии встроить это в этот сценарий.

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

Вот сценарий. Ребята, вы молодцы!

$(function() {
  $(document).ready(function () {
    $(".folderContent").hide();
  });

  $(".signin").click(function(event) {
    var folderContent = $(".folderContent");


    var folderContentShown = folderContent.css("display") != "none";

    var clickedFolder = $(this);
    clickedFolder.parent("#signincontainer").after(folderContent);

    $("body").find("#container").not(clickedFolder).each(function() {
        if (!folderContentShown) $(this).not("#signincontainer").animate( {
            opacity: 0.50
        }, "slow");
        else $(this).animate({
            opacity: 1.00
        }, "slow");

  $('#wrapper2').css('overflow','hidden');                      
    });

    //clickedFolder.animate({opacity: folderContentShown ? 1.00 : 0.70}, "fast");
    folderContent.slideToggle();
    event.preventDefault();
  });
});


$(function() {
  $(document).ready(function () {
    $(".searchfolderContent").hide();
  });

  $(".search").click(function(event) {
    var searchfolderContent = $(".searchfolderContent");


    var searchfolderContentShown = searchfolderContent.css("display") != "none";

    var clickedsearchFolder = $(this);
    clickedsearchFolder.parent("#searchcontainer").after(searchfolderContent);

    $("body").find("#container").not(clickedsearchFolder).each(function() {
        if (!searchfolderContentShown) $(this).not("#searchcontainer").animate( {
            opacity: 0.50
        }, "slow");
        else $(this).animate({
            opacity: 1.00
        }, "slow");

  $('#wrapper2').css('overflow','hidden');                      
    });

    //clickedFolder.animate({opacity: folderContentShown ? 1.00 : 0.70}, "fast");
    searchfolderContent.slideToggle();
    event.preventDefault();
  });
});

Answer 1

Похоже, то, что вы ищете, очень похоже на функциональность, предоставляемую решением «лайтбокс», таким как Fancybox .Это позволяет отображать определенные элементы div при нажатии определенных ссылок / элементов DOM.Вы можете просмотреть некоторые примеры здесь .Все оформление осуществляется с помощью CSS, что позволяет вам изменять его по своему вкусу (включая непрозрачность).

Answer 2

Хорошо, я вижу два вопроса. Во-первых, чтобы показать только, если другой еще не показан, вы можете сделать что-то вроде этого. Предполагается, что есть общий класс по тем вещам, на которые вы нажимаете.

$(".clickything").click(function(){
    if($(".clickything").is(":visible")){
         // do what you want to do if one is already visible
    }else{
         // do whatever you want to do if no others are visible
    }
});

Вопрос о нажатии в другом месте на странице. Есть несколько способов сделать это. Одним из способов было бы добавить обработчик щелчков к телу, которое скрывает их, но затем в обработчик щелчков для интерактивных элементов вы добавляете event.stopPropagation (). Примерно так:

$("body").click(function(){
   $(".clickything").hide();
});

$(".clickything").click(function(e){
   e.stopPropagation();
   //do your other stuff
});

Скрипка: http://jsfiddle.net/SeynY/