使用JQuery展开collapse div
我正在尝试理解这个JQuery代码，我需要这样做，我会使用其他类型的功能，但我需要按照这种方式，我需要修复一些东西，当你点击在plus符号上，它应展开并显示一些内容，plus符号必须更改为minus符号并更改颜色，才能正常工作，当您再次点击minus符号它应该折叠并且不显示内容，但是这不起作用，当您单击minus符号时它会折叠并再次展开，我是Sass的新手，他们是我在这里使用它，我不确定理解一些Sass代码，特别是&.expanded，这意味着什么？我在我的html中找不到一个名为expanded的类，但它在JQuery中使用。他们将JQuery代码放在_Layout文件中。
JQuery函数（$(".contact_item.expanded") ??它意味着什么??）：
<script>
/* expand */
$(".contact_item .head").click(function () {
$('.contact_item.expanded .head').next('div').slideUp();
$('.contact_item.expanded').removeClass('expanded');
$(this).parent('div').toggleClass('expanded');
$(this).next('div').slideDown();
});
</script>
这是我正在谈论的Sass代码，我不太了解&符号：
.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;
}
}
}
}
}
这是一张图片，您可以看到CALIFORNIA OFFICE已展开，但当您点击minus符号时，它会折叠并再次展开...
更新
这是使用f12的html，现在<div class="contact_item">已更改为<div class="contact_item expanded">，但在Razor中它不会发生：
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
@{ var locations = LocationLookup.GetLocations(); }
@{ int numloc = locations.Count / 2;}
@{ var newlist = locations.Take(numloc);}
@foreach (var loc in newlist)
{
<div class="contact_item ">
<div class="head">
<div class="name">@loc.Name office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img src="//lig.azureedge.net/public/UK/Content/Images/marker.png" alt=""></div>
@loc.Address @loc.Continued, @loc.City, @loc.PostCode, @loc.State
</li>
<li>
<div class="icon"><img src="//lig.azureedge.net/public/UK/Content/Images/phone.png" alt=""></div>
@loc.Phone
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
}
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
@for (int i = numloc; i < locations.Count; i++)
{
<div class="contact_item ">
<div class="head">
<div class="name">@locations[i].Name office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img src="//lig.azureedge.net/public/UK/Content/Images/marker.png" alt=""></div>
@locations[i].Address @locations[i].Continued, @locations[i].City, @locations[i].PostCode, @locations[i].State
</li>
<li>
<div class="icon"><img src="//lig.azureedge.net/public/UK/Content/Images/phone.png" alt=""></div>
@locations[i].Phone
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
}
</div>
</div>
</div>
This is the html code using F12 in the browser, in here there is
<section class="hidden-print" id="contact">
<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">
<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)690-6214
</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>
111 2nd Avenue NE Suite 1101, St. Petersburg, 33701, 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">
<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>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact_item">
<div class="head">
<div class="name">Ohio 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>
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)554-6777
</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>
(281)653-6472
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">Washington 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>
2 个答案:
答案 0 :(得分：1)
首先，让我们试着了解jQuery选择器和SASS如何工作。
用于在jQuery中选择元素的行以美元符号（$）开头，这是jQuery的简写。
选择器是传递给此函数的参数。它就像一个CSS选择器。
var elementsWithAppleClass = $(".apple");
将选择具有CSS类“apple”的所有html元素
另一件事是关于SASS如何运作。
Sass基本上是带有一堆语法糖的CSS，所以写起来比普通的CSS更容易。
SASS允许您嵌套CSS选择器。例如：
.banana
{
.pear
{
/* this style applies to all elements with the pear class
inside an element with the banana class */
}
}
SASS中的&运算符意味着您仍在引用上述类，但如果它也具有以下条件，应该会发生什么。
.banana
{
&.pear
{
/* this applies to elements that have the banana class, but */
/* that also have the pear class */
}
}
您也可以使用它来为嵌套的CSS状态编写样式。
.banana
{
&:hover
{
background-color:yellow;
cursor:pointer;
}
}
关于你当前的问题：
为了解决您的问题，您所要做的就是检查您点击的项目是否已经展开，并相应地将您的逻辑基于此。
/* expand */
$(".contact_item .head").click(function () {
if($(this).parent('div').hasClass('expanded'))
{
//this one is already expanded. we just need to collapse it.
$(this).parent('div').toggleClass('expanded');
$(this).next('div').slideUp();
}
else
{
//this one is not yet expanded. let's collapse all the other ones
$('.contact_item.expanded .head').next('div').slideUp();
$('.contact_item.expanded').removeClass('expanded');
//now let's expand this one.
$(this).parent('div').toggleClass('expanded');
$(this).next('div').slideDown();
}
});
答案 1 :(得分：1)
首先，我将通过简单的示例解释SaSS中的&.expanded和JQuery中的$(".contact_item.expanded")的含义。 （如果不感兴趣，您的问题的答案如下）
&是指SaSS中的父选择器。当您嵌套样式时，它会被广泛使用。让我举个简单的例子
div {
&.red { //this is equal to "div.red" in CSS(div having class named 'red')
background: red;
}
}
在上面的例子中，&指的是父母div＆amp;因此，当SaSS编译为CSS时，上面将呈现给div.red ... &为div（父母）
.red之后不久&（名为＆＃39;红色＆＃39;类）意味着div有一个名为＆＃39; red＆＃39;的班级。所以你可以假设HTML就像这样
<div class="red">
... this WILL have background red ...
</div>
<div>
... this WILL NOT have background red ...
</div>
注意：
div.red与div .red不同，请注意div和.red之间的空格。您可以阅读下面给出的链接的区别
现在来到JQuery中的$(".contact_item.expanded")，这意味着您正在尝试在SAME元素TOGETHER中找到一个名为contact_item和expanded的类的元素。它会寻找像
<div class="contact_item expanded">
... this div WILL get selected ...
</div>
<div class="contact_item">
... this div WILL NOT get selected ...
</div>
<div class="expanded">
... this div WILL NOT get selected ...
</div>
您可以阅读所有选择器from here
为了回答你的问题，你的JAVASCRIPT应该是 -
$(".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();
}
});
简单来说，您还需要先检查expanded类是否可用＆amp;然后根据需要添加或删除该类。上面的代码就是这样。
希望它有所帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？