jQuery onclick顯示/隱藏

Question

我需要隱藏容器，當我點擊它之外。我設法讓它工作，有點，但現在容器不會關閉第二次點擊切換按鈕。

• .first是將切換.search
• .search搜索按鈕是搜索容器
• .second是類別按鈕，這將切換.category-dropdown-1
• .category-dropdown-1是第二容器 - 類容器

.searchfade和.category-container-1-fade隱藏秀類與動畫

$(document).ready(function() { 
 
    $(".first").click(function() { 
 
    $(".search").toggleClass('searchfade'); 
 
    }); 
 
    $(".second").click(function() { 
 
    $(".category-dropdown-1").toggleClass('category-dropdown-1-fade'); 
 
    }); 
 
    $("*").mouseup(function(e) { 
 
    var subject = $("#search"); 
 
    if (e.target.id != subject.attr('id') && !subject.has(e.target).length) { 
 
     document.getElementById("search").className = "search"; 
 
    } 
 
    var subject2 = $("#category-dropdown-1"); 
 
    if (e.target.id != subject2.attr('id') && !subject2.has(e.target).length) { 
 
     document.getElementById("category-dropdown-1").className = 
 
     "category-dropdown-1"; 
 
    } 
 
    }); 
 
});

.search { 
 
    visibility: hidden; 
 
    opacity:0; 
 
    transition: 0.3s; 
 
    margin:0; 
 
    width: 100%; 
 
    height:100px; 
 
    text-align: center; 
 
    background-color: #3a54d6; 
 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.3); 
 
    box-sizing: border-box; 
 
    z-index: 11; 
 
    position: absolute; 
 
    margin-top: -1px; 
 
} 
 

 
.searchfade { 
 
    visibility: visible; 
 
    opacity:1; 
 
    transition: 0.3s; 
 
    margin:0; 
 
    width: 100%; 
 
    text-align: center; 
 
    background-color: #3a54d6; 
 
    height:100px; 
 
    animation-name: fade; 
 
    animation-duration: 0.3s; 
 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.3); 
 
    box-sizing: border-box; 
 
    z-index: 10; 
 
    position: absolute; 
 
    margin-top: -1px; 
 
} 
 

 
.category-dropdown-1 { 
 
    visibility: hidden; 
 
    opacity:0; 
 
    transition: 0.3s; 
 
    margin:0; 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: #3a54d6; 
 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.3); 
 
    box-sizing: border-box; 
 
    z-index: 5; 
 
    position: absolute; 
 
    margin-top: -1px; 
 
} 
 

 
.category-dropdown-1-fade { 
 
    visibility: visible; 
 
    opacity:1; 
 
    transition: 0.3s; 
 
    margin:0; 
 
    width: 100%; 
 
    background-color: #3a54d6; 
 
    height:auto; 
 
    animation-name: fade; 
 
    animation-duration: 0.3s; 
 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.3); 
 
    box-sizing: border-box; 
 
    z-index: 6; 
 
    position: absolute; 
 
    margin-top: -1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="under-navigation"> 
 
    <div id="search" class="search"> 
 
    DIV 1 
 
    </div> 
 
    <div id="category-dropdown-1" class="category-dropdown-1"> 
 
    <div class="category-menu"> 
 
     DIV 2 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

我理解你的問題，這裏是該解決方案，按照該documentation on jQuery site。

您必須添加一個全局變量：

var count = 0; 

然後你需要在你的toggleClass功能使用。

$(".second").click(function() { 

     $(".category-dropdown-1").toggleClass('category-dropdown-1-fade', count%2 == 0); 
     count++; 
    }); 

下面是完整的代碼：

$(document).ready(function() 
 
{ 
 
var firstcount = 0; 
 
var secondcount = 0; 
 
\t $(".first").click(function() { 
 
    \t \t $(".search").toggleClass('searchfade',firstcount%2==0); 
 
    firstcount++; 
 
\t }); 
 

 
\t $(".second").click(function() { 
 
     
 
    \t \t $(".category-dropdown-1").toggleClass('category-dropdown-1-fade', secondcount%2 == 0); 
 
     secondcount++; 
 
\t }); 
 

 
    $("*").mouseup(function(e) 
 
    { 
 
     var subject = $("#search"); 
 
     if(e.target.id != subject.attr('id') && !subject.has(e.target).length) 
 
     { 
 
      document.getElementById("search").className = "search"; 
 
     } 
 

 
     var subject2 = $("#category-dropdown-1"); 
 
     if(e.target.id != subject2.attr('id') && !subject2.has(e.target).length) 
 
     { 
 
      document.getElementById("category-dropdown-1").className = "category-dropdown-1"; 
 
     } 
 
    }); 
 

 
});

body 
 
{ 
 
\t margin:0; 
 
\t padding: 0; 
 
} 
 
.navigation 
 
{ 
 
\t width: 100%; 
 
\t background-color: #3a54d6; 
 
\t height: 75px; 
 
\t border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
\t box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2); 
 
\t box-sizing: border-box; 
 
\t position: relative; 
 
    z-index: 20; 
 
    overflow: hidden; 
 
    text-align: center; 
 
} 
 
.navigation a 
 
{ 
 
\t text-decoration: none; 
 
\t height: 75px; 
 
} 
 
.first , .third , .fourth , .fifth 
 
{ 
 
\t width:75px; 
 
} 
 
.first 
 
{ 
 
\t cursor: pointer; 
 
} 
 
.second 
 
{ 
 
\t width:170px; 
 
\t cursor: pointer; 
 
} 
 

 
.first , .second 
 
{ 
 
\t float: left; 
 
\t border-right: 1px solid rgba(255, 255, 255, 0.2); 
 
} 
 
.third , .fourth , .fifth 
 
{ 
 
\t float: right; 
 
\t border-left: 1px solid rgba(255, 255, 255, 0.2); 
 
} 
 
.logos 
 
{ 
 
\t display: inline-block; 
 
\t margin-top:21px; 
 
} 
 
.category-text 
 
{ 
 
\t display: inline-block; 
 
\t margin-left: 7px; 
 
\t margin-top:30px; 
 
\t margin-right: 23px; 
 
\t float: right; 
 
\t text-decoration: none; 
 
\t color: #ffffff; 
 
\t font-family: "Arial", Helvetica, sans-serif; 
 
} 
 
.under-navigation 
 
{ 
 
\t width:100%; 
 
\t background-color: #3a54d6; 
 
\t height: 250px; 
 
\t overflow: hidden; 
 
} 
 

 
.search 
 
{ 
 
\t visibility: hidden; 
 
\t opacity:0; 
 
    transition: 0.3s; 
 
    margin:0; 
 
\t width: 100%; 
 
\t height:100px; 
 
    text-align: center; 
 
    background-color: #3a54d6; 
 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
\t box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.3); 
 
\t box-sizing: border-box; 
 
\t z-index: 11; 
 
\t position: absolute; 
 
    margin-top: -1px; 
 
    
 
} 
 

 
.searchfade 
 
{ 
 
\t visibility: visible; 
 
\t opacity:1; 
 
\t transition: 0.3s; 
 
\t margin:0; 
 
\t width: 100%; 
 
    text-align: center; 
 
    background-color: #3a54d6; 
 
    height:100px; 
 
    animation-name: fade; 
 
    animation-duration: 0.3s; 
 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
\t box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.3); 
 
\t box-sizing: border-box; 
 
\t z-index: 10; 
 
\t position: absolute; 
 
    margin-top: -1px; 
 
} 
 

 
::-webkit-input-placeholder { 
 
    color: #ffffff; 
 
} 
 

 

 
@keyframes fade { 
 
    0% {margin-top:15px;} 
 
    100% {margin-top:-1px;} 
 
} 
 

 
.search-form 
 
{ 
 
\t width: 70%; 
 
\t height:40px; 
 
\t margin:28px auto; 
 
} 
 
.search-bar 
 
{ 
 
\t background: url(search.png) no-repeat scroll 4px 5px; 
 
\t padding-left: 40px; 
 
\t height:40px; 
 
\t width: calc(50% - 170px); 
 
\t border:none; 
 
\t float: left; 
 
\t background-color: transparent; 
 
\t border: 1px solid rgba(255, 255, 255, 0.2); 
 
\t margin-left: 5px; 
 
} 
 
.location-bar 
 
{ 
 
\t background: url(placeholder.png) no-repeat scroll 0px 5px; 
 
\t padding-left: 35px; 
 
\t height:40px; 
 
\t width: calc(50% - 175px); 
 
\t border:none; 
 
\t float: left; 
 
\t background-color: transparent; 
 
\t border: 1px solid rgba(255, 255, 255, 0.2); 
 
\t margin-left: 5px; 
 
} 
 

 
.main-logo-container 
 
{ 
 
\t display: inline-block; 
 
\t margin:0; 
 
\t height:75px; 
 
\t margin:auto; 
 
\t width:200px; 
 
} 
 
.main-logo 
 
{ 
 
\t font-size: 35px; 
 
\t display: inline-block; 
 
\t margin:0; 
 
\t font-family: "Arial", Helvetica, sans-serif; 
 
\t font-weight: bold; 
 
\t color: #ffffff; 
 
\t margin-top: 17px; 
 
\t text-shadow: 1px 1px 1px #000000; 
 
} 
 
.category-button 
 
{ 
 
\t margin:0; 
 
\t border:none; 
 
\t height: 44px; 
 
\t float: left; 
 
\t border: 1px solid rgba(255, 255, 255, 0.2); 
 
\t width:10%; 
 
\t background-color: transparent; 
 
\t color: #ffffff; 
 
\t font-family: "Arial", Helvetica, sans-serif; 
 
} 
 
.dropbtn { 
 
    background-color: transparent; 
 
    color: white; 
 
    height: 44px; 
 
    width: 150px; 
 
    font-size: 16px; 
 
    border: 1px solid rgba(255, 255, 255, 0.2); 
 
    cursor: pointer; 
 
} 
 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    width: 150px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
    
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    width: 150px; 
 
    text-decoration: none; 
 
    display: block; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 

 
.search-btn 
 
{ 
 
\t margin:0; 
 
\t border:none; 
 
\t height: 44px; 
 
\t float: right; 
 
\t border: 1px solid rgba(255, 255, 255, 0.2); 
 
\t width: 100px; 
 
\t margin-left: 5px; 
 
\t background-color: transparent; 
 
\t color: #ffffff; 
 
\t font-family: "Arial", Helvetica, sans-serif; 
 
\t font-size: 16px; 
 
} 
 

 

 
.category-dropdown-1 
 
{ 
 
\t visibility: hidden; 
 
\t opacity:0; 
 
    transition: 0.3s; 
 
    margin:0; 
 
\t width: 100%; 
 
\t height:auto; 
 
    background-color: #3a54d6; 
 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
\t box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.3); 
 
\t box-sizing: border-box; 
 
\t z-index: 5; 
 
\t position: absolute; 
 
    margin-top: -1px; 
 
} 
 
.category-dropdown-1-fade 
 
{ 
 
\t visibility: visible; 
 
\t opacity:1; 
 
\t transition: 0.3s; 
 
\t margin:0; 
 
\t width: 100%; 
 
    background-color: #3a54d6; 
 
    height:auto; 
 
    animation-name: fade; 
 
    animation-duration: 0.3s; 
 
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
 
\t box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.3); 
 
\t box-sizing: border-box; 
 
\t z-index: 6; 
 
\t position: absolute; 
 
    margin-top: -1px; 
 
} 
 
.category-menu 
 
{ 
 
\t display: block; 
 
\t height:auto; 
 
\t width:80%; 
 
\t margin:auto; 
 
\t padding:0; 
 
\t margin-top:10px; 
 
\t margin-bottom: 10px; 
 
} 
 
.category-menu a 
 
{ 
 
\t display: inline-block; 
 
\t height: 50px; 
 
\t width: 230px; 
 
\t margin:5px; 
 
} 
 
.icon-back , .icon-back2 , .icon-back3 , .icon-back4 , .icon-back5 , .icon-back6 , .icon-back7 , .icon-back8 , .icon-back9 , .icon-back10 , .icon-back11 , .icon-back12 
 
{ 
 
\t height: 50px; 
 
\t width: 50px; 
 
\t display: inline-block; 
 
\t border-radius: 25px; 
 
\t float: left; 
 
} 
 
.icon-back 
 
{ 
 
\t background: url(car.png) no-repeat scroll 9px 8px; 
 
\t background-color: #ffffff; 
 
} 
 
.icon-back2 
 
{ 
 
\t background: url(home.png) no-repeat scroll 9px 8px; 
 
\t background-color: #ffffff; 
 
} 
 
.icon-back3 
 
{ 
 
\t background: url(pc.png) no-repeat scroll 9px 8px; 
 
\t background-color: #ffffff; 
 
} 
 
.icon-back4 
 
{ 
 
\t background: url(ball.png) no-repeat scroll 9px 8px; 
 
\t background-color: #ffffff; 
 
} 
 
.icon-back5 
 
{ 
 
\t background: url(pet.png) no-repeat scroll 9px 8px; 
 
\t background-color: #ffffff; 
 
} 
 
.icon-back6 
 
{ 
 
\t background: url(chair.png) no-repeat scroll 9px 8px; 
 
\t background-color: #ffffff; 
 
} 
 
.icon-back7 
 
{ 
 
\t background: url(tshirt.png) no-repeat scroll 9px 8px; 
 
\t background-color: #ffffff; 
 
} 
 
.icon-back8 
 
{ 
 
\t background: url(baby.png) no-repeat scroll 9px 8px; 
 
\t background-color: #ffffff; 
 
} 
 
.icon-back9 
 
{ 
 
\t background: url(umbrella.png) no-repeat scroll 9px 8px; 
 
\t background-color: #ffffff; 
 
} 
 
.icon-back10 
 
{ 
 
\t background: url(wrench.png) no-repeat scroll 9px 8px; 
 
\t background-color: #ffffff; 
 
} 
 
.icon-back11 
 
{ 
 
\t background: url(truck.png) no-repeat scroll 9px 8px; 
 
\t background-color: #ffffff; 
 
} 
 
.icon-back12 
 
{ 
 
\t background: url(briefcase.png) no-repeat scroll 9px 8px; 
 
\t background-color: #ffffff; 
 
} 
 

 
.category-description 
 
{ 
 
\t display: inline-block; 
 
\t float: left; 
 
\t margin-left: 5px; 
 
\t color: #ffffff; 
 
\t font-family: "Arial", Helvetica, sans-serif; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<header class="navigation"> 
 
\t \t <a id="first" class="first"><img id="image1" class="logos" src="search.png" alt="Search"></a> 
 
\t \t <a id="second" class="second"><img id="image2" class="logos" src="menu.png" alt="Menu"><p id="text1" class="category-text">Категория</p></a> 
 
\t \t 
 
\t \t <div class="main-logo-container"> 
 
\t \t \t <p class="main-logo">Битака</p> 
 
\t \t </div> 
 
\t \t <a class="third" href="#"><img class="logos" src="log-in.png" alt="Log-in"></a> 
 
\t \t <a class="fourth"><img class="logos" src="users.png" alt="Users"></a> 
 
\t \t <a class="fifth"><img class="logos" src="add.png" alt="Add"></a> 
 
\t </header> 
 

 
<div class="under-navigation"> 
 

 
<div id="search" class="search"> 
 
\t <form class="search-form"> 
 
\t \t <div id="dropdown" class="dropdown"> 
 
    \t \t \t <button type="button" class="dropbtn">Категория</button> 
 
    \t \t \t \t <div class="dropdown-content"> 
 
    \t \t \t \t <a href="#">Link 1</a> 
 
    \t \t \t \t <a href="#">Link 2</a> 
 
    \t \t \t \t <a href="#">Link 3</a> 
 
    \t \t \t \t </div> 
 
\t \t </div> 
 
\t \t <input class="search-bar" type="text" name="search" placeholder="Search"> 
 
\t \t <input class="location-bar" type="text" name="location" placeholder="Location"> 
 
\t \t \t <button class="search-btn" type="submit">Търси</button> 
 
\t </form> 
 
</div> 
 
\t \t <div id="category-dropdown-1" class="category-dropdown-1"> 
 
\t \t \t <div class="category-menu"> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="icon-back"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p class="category-description">Автомобили</p> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="icon-back2"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p class="category-description">Дом и градина</p> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="icon-back3"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p class="category-description">Електроника</p> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="icon-back4"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p class="category-description">Спорт и хоби</p> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="icon-back5"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p class="category-description">Животни</p> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="icon-back6"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p class="category-description">Обзавеждане</p> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="icon-back7"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p class="category-description">Мода и облекло</p> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="icon-back8"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p class="category-description">За бебето</p> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="icon-back9"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p class="category-description">Екскурзии и почивки</p> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="icon-back10"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p class="category-description">Услуги</p> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="icon-back11"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p class="category-description">Машини и оборудване</p> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t \t <a href="#"> 
 
\t \t \t \t \t \t <div class="icon-back12"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p class="category-description">Работа</p> 
 
\t \t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
</div>