展开折叠div
我有不同的div，我想点击div并扩展其内容，如果我再次点击它应该隐藏该内容，这工作正常，但我有不同的div，我想只有一个div扩展为同时，我应该怎么做到这一点？
这不好，你看到我此时可以扩展几个div，我怎样才能确保这不会发生？：
这是我想要达到的目标：
JQuery函数，当我点击一个新的时，如何折叠任何其他展开的div？：
$(".contact_item .head").click(function () {
if ($(this).parent('div').hasClass('expanded')) {
$(this).next('div').slideUp();
$(this).parent('div').removeClass('expanded');
} else {
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
});
Html代码：
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3"> </div>
<div class="col-lg-9 col-md-9 col-sm-9 white">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 rghtpd"><style>.rghtpd{padding-right: 0px !important; width:583px;}</style>
<div class="title">Contact us</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact_item expanded">
<div class="head">
<div class="name">California office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: block;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
One Embarcadero Center Suite 500, San Fransisco, 94111, CA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(415) 639-3001
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">Florida office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
9600 Koger Blvd. Suite 225, St. Petersburg, 33702, FL
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(727) 578-2800
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">London office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
Lloyd's Building, Gallery 4 12 Leadenhall St., London, EC3V 1LP, England
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(0207) 101-9395
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">myName office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
123 Fake st , Springfield, 12345, OH
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
555
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact_item expanded">
<div class="head">
<div class="name">Ohio office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: block;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
4449 Easton Way 2nd Floor, Columbus, 43219, OH
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(614)526-8754
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">Pennsylvania office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
One International Plaza Suite 550, Philadelphia, 19113, PA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(215) 279-5845
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">Texas office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
950 Echo Lane Suite 200, Houston, 77024, TX
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(832) 586-0301
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">WASH office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
1100 Dexter Avenue North Suite 100, Seattle, 98109, WA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(253)271-9692
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
更新：这是CSS
.contact_item {
width: 100%;
border: 1px solid #f1e7e0;
background-color: #fcf6f5;
margin: 3px 0px;
float: left;
&.expanded {
.head .name {
color: #f60;
}
.head .name span {
border-color: #f60;
color: #f60;
&.plus {
display: none;
}
&.minus {
display: block;
}
}
}
.head {
.name {
font-family: "Tahoma";
color: rgb(100, 100, 100);
font-size: 11.1px;
text-transform: uppercase;
padding: 7px 15px;
cursor: pointer;
position: relative;
span {
position: absolute;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #706f6f;
text-align: center;
right: 15px;
top: 7px;
font-size: 18px;
line-height: 17px;
&.minus {
display: none;
}
}
}
}
}
我已经改变了一点我的JQuery功能，现在它只允许扩展一个div，但我必须点击两次才能展开div，第一次关闭任何其他扩展的div但是没有打开我点击的那个，然后第二次打开：
$(".contact_item .head").click(function () {
if ($(".contact_item .head").parent('div').hasClass('expanded')) {
$(".contact_item .head").next('div').slideUp();
$(".contact_item .head").parent('div').removeClass('expanded');
} else {
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
});
3 个答案:
答案 0 :(得分：0)
我试图实现你的要求：
https://jsfiddle.net/pje7Lznf/
<!DOCTYPE html >
<html>
<head>
<link rel="stylesheet" href="modal.css">
</head>
<body>
<script type="text/javascript">
function modalFun(){
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
console.log(modal);
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
window.onload=modalFun;
</script>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
我把一个简单的基于CSS的解决方案放在一起，它允许将jQuery代码简化为这样的代码：
$('.contact_item').on('click', '.head', function () {
var clicked = $(this).closest('.contact_item');
$('.contact_item.expanded').add(clicked).toggleClass('expanded');
});
该解决方案取消了动画，但这是我如何处理很多这些类型的情况，并且它相对超级干净。如果有必要，从这里开始添加动画应该是一个相当简单的练习，但是将此解决方案视为一个不错的选择：
答案 2 :(得分：0)
这些是很好的建议，但没有完全发挥作用，最后这是我对我的功能所做的，现在它可以工作：
$(".contact_item .head").click(function () {
var flag = $(this).parent('div').hasClass('expanded');
if ($(".contact_item .head").parent('div').hasClass('expanded')) {
$(".contact_item .head").next('div').slideUp();
$(".contact_item .head").parent('div').removeClass('expanded');
if (flag==false) {
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
}
else {
$(this).parent('div').addClass('expanded');
$(this).next('div').slideDown();
}
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？