使用 JQuery 展开折叠 div答案

【问题标题】：Expand collapse div using JQuery使用 JQuery 展开折叠 div
【发布时间】：2017-02-12 17:36:41
【问题描述】：

我正在尝试理解这个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>

【问题讨论】：

你能创建一个示例小提琴吗？
您没有发布任何 HTML。我认为您也应该发布 HTML，或者更好的是，像 @Rajesh 所说的那样制作 fiddle。关于 & 符号，表示它引用了父选择器。
@lonut 我用 html 更新了
请发布输出 html，而不是剃须刀。而不是小提琴，做一个sn-p
这里有一个 jsfiddle ：jsfiddle.net/1ctahoqu 从那里你可以看到扩展框的目的是用作某种口琴控制

标签： jquery html css asp.net-mvc sass

【解决方案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();
        }

    });

Demo jsfiddle here

【讨论】：

请注意，为了使此解决方案看起来更整洁，您不应使用 expanded 类呈现联系人项目。

【解决方案2】：

首先我将通过简单的例子解释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 的父级，因此当 SaSS 编译为 CSS 时，上面将呈现为 div.red ... & 是 div(父级)

现在& 后面的.red(class named 'red') 意味着div 有一个名为'red' 的类。所以你可以假设 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")，这意味着您正在尝试在相同的元素中找到一个具有名为 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();
        }
    });

查看Codepen here

简而言之，您还需要首先检查expanded 类是否可用，然后根据需要添加或删除该类。上面的代码就是这样做的。

希望对您有所帮助。

【讨论】：

帮助很大！！谢谢！！