jQuery onclick显示/隐藏

时间：2017-10-10 14:51:57

标签： jquery

当我点击容器外，我需要隐藏容器。我设法让它工作，但是现在容器不会在第二次点击切换按钮时关闭。

  • <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>是切换.first
    • 的搜索按钮
  • .search是搜索容器
  • .search是用于切换.second
    • 的类别按钮
  • .category-dropdown-1是第二个容器 - 类别容器

.category-dropdown-1和.searchfade是带动画的隐藏显示类

＆＃13;
＆＃13; 
.category-container-1-fade
＆＃13; 
$(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";
    }
  });
});
＆＃13; 
.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;
}
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我理解您的问题，根据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;
	$( ".first" ).click(function() {
 		$(".search").toggleClass('searchfade',firstcount%2==0);
   firstcount++;
	});

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

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

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

.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;
}

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


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

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

.main-logo-container
{
	display: inline-block;
	margin:0;
	height:75px;
	margin:auto;
	width:200px;
}
.main-logo
{
	font-size: 35px;
	display: inline-block;
	margin:0;
	font-family: "Arial", Helvetica, sans-serif;
	font-weight: bold;
	color: #ffffff;
	margin-top: 17px;
	text-shadow: 1px 1px 1px #000000;
}
.category-button
{
	margin:0;
	border:none;
	height: 44px;
	float: left;
	border:  1px solid rgba(255, 255, 255, 0.2);
	width:10%;
	background-color: transparent;
	color: #ffffff;
	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
{
	margin:0;
	border:none;
	height: 44px;
	float: right;
	border:  1px solid rgba(255, 255, 255, 0.2);
	width: 100px;
	margin-left: 5px;
	background-color: transparent;
	color: #ffffff;
	font-family: "Arial", Helvetica, sans-serif;
	font-size: 16px;
}


.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;
}
.category-menu
{
	display: block;
	height:auto;
	width:80%;
	margin:auto;
	padding:0;
	margin-top:10px;
	margin-bottom: 10px;
}
.category-menu a 
{
	display: inline-block;
	height: 50px;
	width: 230px;
	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
{
	height: 50px;
	width: 50px;
	display: inline-block;
	border-radius: 25px;
	float: left;
}
.icon-back
{
	background: url(car.png) no-repeat scroll  9px 8px;
	background-color: #ffffff;
}
.icon-back2
{
	background: url(home.png) no-repeat scroll  9px 8px;
	background-color: #ffffff;
}
.icon-back3
{
	background: url(pc.png) no-repeat scroll  9px 8px;
	background-color: #ffffff;
}
.icon-back4
{
	background: url(ball.png) no-repeat scroll  9px 8px;
	background-color: #ffffff;
}
.icon-back5
{
	background: url(pet.png) no-repeat scroll  9px 8px;
	background-color: #ffffff;
}
.icon-back6
{
	background: url(chair.png) no-repeat scroll  9px 8px;
	background-color: #ffffff;
}
.icon-back7
{
	background: url(tshirt.png) no-repeat scroll  9px 8px;
	background-color: #ffffff;
}
.icon-back8
{
	background: url(baby.png) no-repeat scroll  9px 8px;
	background-color: #ffffff;
}
.icon-back9
{
	background: url(umbrella.png) no-repeat scroll  9px 8px;
	background-color: #ffffff;
}
.icon-back10
{
	background: url(wrench.png) no-repeat scroll  9px 8px;
	background-color: #ffffff;
}
.icon-back11
{
	background: url(truck.png) no-repeat scroll  9px 8px;
	background-color: #ffffff;
}
.icon-back12
{
	background: url(briefcase.png) no-repeat scroll  9px 8px;
	background-color: #ffffff;
}

.category-description
{
	display: inline-block;
	float: left;
	margin-left: 5px;
	color: #ffffff;
	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">
		<a id="first" class="first"><img id="image1" class="logos" src="search.png" alt="Search"></a>
		<a id="second" class="second"><img id="image2" class="logos" src="menu.png" alt="Menu"><p id="text1" class="category-text">Категория</p></a>
		
		<div class="main-logo-container">
			<p class="main-logo">Битака</p>
		</div>
		<a class="third" href="#"><img class="logos" src="log-in.png" alt="Log-in"></a>
		<a class="fourth"><img class="logos" src="users.png" alt="Users"></a>
		<a class="fifth"><img class="logos" src="add.png" alt="Add"></a>
	</header>

<div class="under-navigation">

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

</div>

相关问题
最新问题