Question

每当我点击一个div展开时，我都有这个问题，但是如果我点击一个折叠的那个，那么两个都崩溃，第一个返回到非活动状态，此时最后两个都是活动的和非活动的......如果这时我点击第一个，它们都会立即展开。

``
<html lang="es"><head>

<!--hojas de estilos-->
<link href="css/estilos.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<div id="content">
<div class="column1">
    <div id="logofield">
        <img src="Logo.png">
    </div>

</div>
<div class="column2">

    <div id="division">
    </div>

    <div id="buttonwrap">
        <a href="index.html"><span id="button"><img id="home" src="home.png"></span></a>
        <a href="contact.html"><span id="button"><h3>Contacto</h3></span></a>
        <a href="products.html"><span id="button"><h3>Productos</h3></span></a>
        <a href="gallery.html"><span id="button"><h3>Galería</h3></span></a>
    </div>

    <div class="wrapper" id="main_field">

        <section class="article" id="article_wrap">
            <img id="imicon" src="user.png"><h2 id="subtitle1">QUIENES SOMOS</h2>
            <div id="imagewrap">
            <img id="icon1" src="after.png">
            <img id="icon2" src="before.png">

            <img id="frame" src="im4.jpg">              
            <p id="descriptf">
            Servcont se establece como empresa a finales del 2013, pero sus labores se inician en octubre de 1999, ofreciendo servicios de mantenimiento a grandes empresas, pero ademas de constrccion a particulares, ofreciendo siempre la mejor calidad y servicio a sus clientes a lo largo de su trayectoria. 
            </br>
            </br>
            Además de esto Servcont, ofrece productos de fabricación propia de altisima calidad, dando a sus clientes la confianza y seguridad que ellos necesitan.  </p>

            </div>

        </section>

        <section class="article" id="article_wrap">
            <img id="imicon" src="page.png"><h2 id="subtitle1">QUE HACEMOS</h2> 
            <div id="imagewrap">
            <img id="icon1" src="after.png">
            <img id="icon2" src="before.png">

            <p id="descriptf">
            Ofrecemos soluciones a los problemas de nuestros clientes, de la forma mas eficiente y eficaz, ahorrando tiempo y recursos.
            </br>
            </br>
            Realizamos obras de mantenimiento importantes, reparación de techos, cajas de luz y otros.
            </br>
            </br>
            Además de trabajos de construccion y remodelación domiciliarias, junto con instalación de termo cañones y reparaciones.</p>
            <img id="frame" src="im5.jpg">
            </div>
        </section>

        <section class="article" id="article_wrap">
            <img id="imicon" src="page.png"><h2 id="subtitle1">NUESTRA MISION</h2>      
            <div id="imagewrap">
            <img id="icon1" src="after.png">
            <img id="icon2" src="before.png">   

            <p id="descriptf">
            Entregar el mejor servicio y atraves de esto dar mayor fuerza a nuestros clientes, permitiendoles enfocar sus esfuerzos en hacer crecer sus negocios
            y no en los problemas que pudiesen presentar.
            </br>
            </br>
            Dar solucion a los problemas de nuestros clientes, de manera eficaz y rápida.
            </br>
            </br>
            Llegar a más clientes, ofreciendo nuestros servicios a quienes pudiesen necesitarlos, entregando siempre la mejor calidad.</p>
            <img id="frame" src="im6.jpg">
            </div>
        </section>

        <div id="contact_info">
            <img id="iconc" src="user.png">
            <p id="info">Victor Eduardo Millar</p>
            </br>
            <img id="iconc" src="phone.png">
            <p id="info">0000 0000</p>
            </br>
            <img id="iconc" src="mail.png">
            <p id="info">eduardo.millar@serv-cont.cl</p>
        </div>


        <div id="timewrap">
            <a href="http://time.is/Osorno" id="time_is_link" style="font-size:26px; font-family:arial; color:white"></a>
            <img id="icont" src="time.png">
            <span id="time"><span onclick="window.location='http://time.is/Osorno'" title="http://time.is/Osorno">02:00</span></span>
            <script src="http://widget.time.is/t.js"></script>
            <script>time_is_widget.init({Osorno_z179:{time_format:"hours:minutes"}});</script>
        </div>

        <div id="hlinkbutton">

        </div>



    </div>
</div>
</div>
<script type="text/javascript">
    $(document).ready(function(){$('.wrapper section').click(function() {
    $(this).toggleClass('activo');
    $(this).siblings().not(this).toggleClass('oculto');
    });});
</script>
</body>

</html>
``

它不会工作＆gt; _＆lt;

Answer 1

你的逻辑需要改进：你所做的是当点击一个部分时，你正在切换一个类，并且它的兄弟姐妹正在与另一个类切换 - 如果你打算实现一个或者一个场景，你只需要添加和删除类：

$(function(){
    $('.wrapper section').click(function() {
        $(this)
        .addClass('activo')
        .removeClass('oculto')
        .siblings('section') // Probably a good idea to be a bit specific here
            .addClass('oculto')
            .removeClass('activo');
    });
});

p / s：你可以完全利用方法链，这是jQuery最强大的功能之一;）

请在此处查看有关概念JSFiddle的证据。

Answer 2

不确定你的标记，但凭直觉我会说这应该有效：

$(this).addClass('activo').removeClass('oculto');
$(this).siblings().not(this).addClass('oculto').removeClass('activo');

如何一次只切换1个元素的类

2 个答案: