统一一个JQuery脚本并构建一个检查 [英] Unify a JQuery Script and build in a check

问题描述

当点击一个按钮时，它会打开一个框。这可能很难，但是我不想发生的是当一个框打开（定义为#signincontainer和#searchcontainer）时，我不希望另一个可以打开。我不够好，可以将其构建到这个脚本中。

此外，当用户点击页面上的其他位置时，可以这样做在框内，它关闭框？

这是脚本。你们摇滚！

  $（function（）{
 $（document）.ready（function（） b $ b $（。folderContent）。hide（）; 
}）; 
 
 $（。signin）点击（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'）。 '
}）; 
 
 //clickedFolder.animate({opacity：folderContentShown？1.00：0.70}，fast）; 
 folderContent .slideToggle（）; 
 eve nt.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）; 
 search folderContent.slideToggle（）; 
 event.preventDefault（）; 
}）; 
}）; 
  

解决方案

好的，所以我看到两个问题。首先，要显示如果另一个没有显示，你可以做这样的事情。假设你点击的事情有一个共享类。

  $（。clickything）点击（function（）{
 if（$（ ）.is（：visible））{
 //做你想做的事情，如果一个已经可见
} else {
 //做任何你想做的，如果没有其他可见
} 
}）; 
  

点击页面其他地方的问题。有多种方法可以做到这一点。一种方法是向hidesthem的body添加一个点击处理程序，但是在点击处理程序中，您可以添加event.stopPropagation（）的可点击项。这样的东西：

  $（body）。click（function（）{
 $（。clickything ）.hide（）; 
}）; 
 
 $（。clickything）点击（function（e）{
 e.stopPropagation（）; 
 //做你的其他东西
}）; 
  

小提琴： http://jsfiddle.net/SeynY/

I am trying to consolidate this script a bit.. They both do almost the same thing.

When a button is clicked, it opens a box. It might be tough, but what I DON'T want to happen is when one box is open (defined as the #signincontainer and #searchcontainer) I don't want the other one to be able to be open as well. I am not good enough to be able to build this into this script.

Also, is it possible to make it so when the user clicks somewhere else on the page other than inside the box, it closes the box?

Here's the script. You guys rock!

$(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();
  });
});

解决方案

Okay, so I see two questions. First, to only show if another is not already shown you can do something like this. Assumes there is a shared class on the things you are clicking.

$(".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
    }
});

The question of clicking elsewhere on the page. There are multiple ways of doing this. One way would be to add a click handler to the body that hidesthem, but then in the click handler for you clickable items you add event.stopPropagation(). Somethign like this:

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

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

Fiddle: http://jsfiddle.net/SeynY/

这篇关于统一一个JQuery脚本并构建一个检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！