选择另一个div时隐藏内容

时间:2017-02-08 01:31:05

标签: javascript jquery html css

我有一个代码,允许用户点击图像并接收与图像相关的信息。我需要在两个文本区域之间切换信息(因此一次只显示一个文本正文)。任何人都可以帮我解决这个问题吗?谢谢!

$(document).ready(function(){
    $(".customers").click(function () {
       
        if($(".content1").height() === 0){
             $(".content1").animate({height: "100%"}, 500);
        }else{
            $(".content1").animate({height: "0px"}, 500);
        }
        
    });
})


$(document).ready(function(){
    $(".landlords").click(function () {
       
        if($(".content2").height() === 0){
             $(".content2").animate({height: "100%"}, 500);
        }else{
            $(".content2").animate({height: "0px"}, 500);
        }
        
    });
})
.information {  
  background-color:#fff;
  text-align:center;
}

.customers {
  display:inline-block;
}

.landlords {
  display:inline-block;
}

.content1 {
width:80%;
margin:auto;
}

.content2 {
width:80%;
margin:auto;
}
<div class="information">
    <div class="customers"><img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/10/Customers.jpg" width="200"></div>
    <div class="landlords"><img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/12/Landlords.jpg" width="200"></div>
    <div class="content1" style="height: 0px;overflow:hidden;">
        Cornerstone Parking provides value for money parking in Brisbane’s CBD and surrounding suburbs. Our turn up and park rates (ie no need to pre-book) are often cheaper than other car park’s online discount rates and you can always be sure of getting a bay in a Cornerstone car park. Our convenient and centrally located CBD car parks are run by our friendly staff and are predominantly located in the Adelaide Street, Ann Street and Creek Street areas. Our car parks offer discounted parking in large bays with ample height clearance. We offer hourly (visitor) parking as well as monthly parking, early bird parking and motorbike parking in most of our car parks.
    </div>
     <div class="content2" style="height: 0px;overflow:hidden;">
       Cornerstone Parking provides a high quality, professional and technology driven car park management service. A part of the Cornerstone Group, our property development and management heritage provides us with a true appreciation of landlord issues. Our parent company backing means that Cornerstone Parking has the appetite and ability to participate in larger parking projects, including the development of new car parks. We provide owners, investors and developers with our car park management, advisory and consultation services.
    </div>
   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></div>

1 个答案:

答案 0 :(得分:1)

我认为这就是你需要的:只在每个onclick事件监听器的开头添加if语句。

&#13;
&#13;
$(document).ready(function(){
    $(".customers").click(function () {

        if($(".content2").height() != 0){
            $(".content2").animate({height: "0px"}, 500);
        }
       
        if($(".content1").height() === 0){
             $(".content1").animate({height: "100%"}, 500);
        }else{
            $(".content1").animate({height: "0px"}, 500);
        }
        
    });
})


$(document).ready(function(){
    $(".landlords").click(function () {
        
        if($(".content1").height() != 0){
            $(".content1").animate({height: "0px"}, 500);
        }
        if($(".content2").height() === 0){
             $(".content2").animate({height: "100%"}, 500);
        }else{
            $(".content2").animate({height: "0px"}, 500);
        }
        
    });
})
&#13;
.information {  
  background-color:#fff;
  text-align:center;
}

.customers {
  display:inline-block;
}

.landlords {
  display:inline-block;
}

.content1 {
width:80%;
margin:auto;
}

.content2 {
width:80%;
margin:auto;
}
&#13;
<div class="information">
    <div class="customers"><img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/10/Customers.jpg" width="200"></div>
    <div class="landlords"><img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/12/Landlords.jpg" width="200"></div>
    <div class="content1" style="height: 0px;overflow:hidden;">
        Cornerstone Parking provides value for money parking in Brisbane’s CBD and surrounding suburbs. Our turn up and park rates (ie no need to pre-book) are often cheaper than other car park’s online discount rates and you can always be sure of getting a bay in a Cornerstone car park. Our convenient and centrally located CBD car parks are run by our friendly staff and are predominantly located in the Adelaide Street, Ann Street and Creek Street areas. Our car parks offer discounted parking in large bays with ample height clearance. We offer hourly (visitor) parking as well as monthly parking, early bird parking and motorbike parking in most of our car parks.
    </div>
     <div class="content2" style="height: 0px;overflow:hidden;">
       Cornerstone Parking provides a high quality, professional and technology driven car park management service. A part of the Cornerstone Group, our property development and management heritage provides us with a true appreciation of landlord issues. Our parent company backing means that Cornerstone Parking has the appetite and ability to participate in larger parking projects, including the development of new car parks. We provide owners, investors and developers with our car park management, advisory and consultation services.
    </div>
   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></div>
&#13;
&#13;
&#13;