Bootstrap 折叠 select 选项

Bootstrap collapse with select option

我需要通过选项选择器显示 <div>。 这是在移动版本中实现更好使用的问题。

这是我现在如何拥有代码的示例,我需要的是具有相同选项的选择器而不是按钮

http://www.bootply.com/9SIjN7yAcD

类似(但有效)

http://www.bootply.com/J64QiBUmyt


他找到了 a code,试图做同样的事情但无法修复它。

您可以通过下面的link.

进行确认

Fiddle

$(function() {
$.fn.showField = function() {
    var selectVal = document.getElementById(this.val() + 'Div');
    return this.each(function() {
        $(selectVal).show().siblings('div').hide();
    });
};    
$('select#reportsSelect').change(function() {
    $(this).showField();
});

});

您可以使用 Bootstrap Button Dropdown.

    $('.collapse').on('show.bs.collapse', function(e) {
      $('.collapse').not(e.target).removeClass('in');
    })


     $('.accordion h3, #menutrat > button').bind('click', function() {
      var self = this;
      setTimeout(function() {
        theOffset = $('#tratamientos').offset();
        $('body,html').animate({
          scrollTop: theOffset.top - 1
        });
      }, 310); // ensure the collapse animation is done
    });

    $('#implantologia').addClass('in');
    $('#menutrat > button:nth-child(1)').addClass('active');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <section id="tratamientos" class="row">
    <div class="col-sm-12">
      <h1>Tratamientos</h1>

    </div>
    <div class="btn-group col-sm-2" id="menutrat">
      <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Seleccionar <span class="caret"></span>

      </button>
      <ul class="dropdown-menu">
        <li><a href="#" data-toggle="collapse" data-target="#implantologia" aria-expanded="false" onclick="Implantología">Implantología</a>

        </li>
        <li><a href="#" data-toggle="collapse" data-target="#protesis" aria-expanded="false" onclick="Protesis">Protesis</a>

        </li>
        <li><a href="#" data-toggle="collapse" data-target="#estetica-dental" aria-expanded="false" onclick="Estética dental">Estética dental</a>

        </li>
        <li><a href="#" data-toggle="collapse" data-target="#coronas-de-porcelana" aria-expanded="false" onclick="Coronas de porcelana">Coronas de porcelana</a>

        </li>
        <li><a href="#" data-toggle="collapse" data-target="#carillas" aria-expanded="false" onclick="Carillas">Carillas</a>

        </li>
      </ul>
    </div>
    <div class="col-sm-10">
      <div class="collapse" id="implantologia">
        <h3>Implantología</h3>

        <div class="accordion">
          <h3> ¿Qué es un implante?</h3>

          <div>
            <p>Un implante es una raíz artificial de titanio que reemplaza el diente perdido.</p>
            <p>
              <img class=" wp-image-158 size-medium alignnone img-responsive" src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/implantes-dentales-470x256.jpg" alt="" width="470" height="256" />
            </p>
            <p>Un diente se divide en corona y raíz, la corona es lo que se ve, y la raíz es la parte que está adentro del hueso.</p>
            <p>
              <img class=" wp-image-154 size-medium alignnone img-responsive" src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/dientint-375x300.gif" alt="" width="375" height="300" />
            </p>
            <p>Cuando se pierde un diente en su totalidad, se pierde, raíz y corona, entonces a la hora de reemplazarlo, vamos a colocar primero una raíz de titanio, que es el implante, y luego una corona de porcelana, que reemplaza a la corona del diente.</p>
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="//www.youtube.com/embed/HW-Kp2RNflc"></iframe>
            </div>
            <p>Sin embargo, en algunas situaciones, no es necesario colocar un implante por diente perdido, sino que es posible colocar menos implantes y reponer más dientes perdidos. Por ejemplo colocamos tres implantes y colocamos cuatro o cinco dientes
              en boca.</p>
            <p>
              <a href="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/implante-dental-birbe.jpg">
                <img class="alignleft wp-image-159 size-full img-responsive" src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/implante-dental-birbe.jpg" alt="" width="400" height="228" />
              </a>

            </p>
          </div>
        </div>
      </div>
      <div class="collapse" id="protesis">
        <h3>Protesis</h3>

        <div class="accordion">
          <h3> ¿Cuantos tipos de prótesis existen?</h3>

          <div>
            <p>Existen muchas categorías para clasificar las prótesis, pero para simplificar las podemos dividir en dos grandes grupos: prótesis fijas y prótesis removibles.</p>
            <p>Las <strong>prótesis removibles</strong> son las que se ponen y se sacan por el paciente. Antiguamente se hacían con ganchos, y los pacientes tenían un gran volumen de plástico dentro de la boca, movil, poco funcional y molesto para reir, estornudar,
              bostezar, etc. Estas prótesis se les salian de la boca y lastiman, lo que los limitaba muchísimo desde el punto de vista social, porque no podían hacer una vida normal.</p>
            <p>En la actualidad estas prótesis removibles SE FIJAN A IMPLANTES, por lo tanto funciona como una prótesis fija, devolviendo a nuestros pacientes el confort que tenían cuando tenían sus propios dientes.</p>
            <div id="attachment_162" style="width: 341px" class="wp-caption alignnone">
              <img class="wp-image-162 size-medium img-responsive" src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/prótesis-removible-sobre-implantes-331x300.jpg" alt="" width="331" height="300" />
              <p class="wp-caption-text">prótesis removible sobre implantes</p>
            </div>
            <p>&nbsp;</p>
            <p>Las <strong>prótesis fijas</strong> son fundas de porcelana que van sobre los dientes y sobre los implantes, de manera que todo lo que se ve es estético.</p>
            <p>Reemplazan a los dientes naturales y mejoran la estetica de dientes viejos cariados y manchados por unos nuevos y brillantes.</p>
            <div id="attachment_164" style="width: 453px" class="wp-caption alignnone">
              <a href="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/prótesis-fija-sobre-implantes.jpg">
                <img class="wp-image-164 size-medium img-responsive" src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/prótesis-fija-sobre-implantes-443x300.jpg" alt="" width="443" height="300" />
              </a>

              <p class="wp-caption-text">prótesis fija sobre implantes (puente)</p>
            </div>
            <div id="attachment_163" style="width: 245px" class="wp-caption alignnone">
              <a href="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/corona_funda_precio.jpg">
                <img class="wp-image-163 size-medium img-responsive" src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/prótesis-fija-sobre-dientes-235x300.jpg" alt="" width="235" height="300" />
              </a>

              <p class="wp-caption-text">prótesis fija sobre diente (corona)</p>
            </div>
            <div id="attachment_165" style="width: 370px" class="wp-caption alignnone">
              <a href="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/prótesis-fija-sobre-implante-corona.jpg">
                <img class="wp-image-165 size-medium img-responsive" src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/prótesis-fija-sobre-implante-corona-360x300.jpg" alt="" width="360" height="300" />
              </a>

              <p class="wp-caption-text">prótesis fija sobre implante (corona)</p>
            </div>
          </div>
        </div>
      </div>
      <div class="collapse" id="estetica-dental">
        <h3>Estética dental</h3>

        <div class="accordion">
          <h3> ¿Qué es estética en odontología?</h3>

          <div>
            <p>La estética viene del griego, quiere decir “SENSACIÓN”, algunos lo relacionan con sensación de belleza.</p>
            <p>Es muy difícil lograr una definición, un concepto, en la que todos estemos de acuerdo en que es lo estético, que es lo bello.</p>
            <p>Entonces los cirujanos plásticos y los dentistas, debemos tener el concepto incorporado, interpretar lo que es lindo y feo, pero es difícil interpretar lo que cada persona siente que es lo mejor. Por lo tanto es muy importante la buena comunicación
              con nuestro pacientes para lograr el resultado que ellos desean.</p>
          </div>
          <h3> ¿Cómo hace un dentista para diseñar los dientes y la sonrisa?</h3>

          <div>
            <p>En nuestra clínica estudiamos parámetros, los cuales los utilizamos para medir las dimensiones de la cara, los dientes, los tejidos blandos (encías), tejidos duros, entre otros.</p>
            <p>Por ejemplo dividir la longitud de la cara del paciente en largo por 16 y eso da el largo del diente incisivo superior, y el ancho entre las sienes dividido en 16 da el ancho de este mismo diente. Entonces si no hay dientes o están feos, uno
              a partir de ese parámetro tiene una referencia que es proporcional y de ahí se saca el resto de los dientes.</p>
            <p>El que ha visto el David de Miguel Angel se da cuenta que el concepto de belleza tiene que ver con LAS PROPORCIONES. Si esta proporcionado es estéticamente bello, si sale de las proporciones es feo, desagrada, no gusta, hay que arreglarlo.</p>
            <div id="attachment_174" style="width: 480px" class="wp-caption aligncenter">
              <img class="wp-image-174 size-medium img-responsive" src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/estetica-470x212.jpeg" alt="" width="470" height="212" />
              <p class="wp-caption-text">Posición y tamaño de dientes</p>
            </div>
            <div id="attachment_175" style="width: 314px" class="wp-caption aligncenter">
              <img class="wp-image-175 size-medium img-responsive" src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/estetica2-304x300.jpg" alt="" width="304" height="300" />
              <p class="wp-caption-text">Estudio de frente facial</p>
            </div>
            <div id="attachment_176" style="width: 365px" class="wp-caption aligncenter">
              <img class="wp-image-176 size-medium img-responsive" src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/estetica3-355x300.gif" alt="" width="355" height="300" />
              <p class="wp-caption-text">Estudio de frente facial</p>
            </div>
            <div id="attachment_276" style="width: 480px" class="wp-caption aligncenter">
              <img src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/foto-diseño-sonrisa-470x212.jpg" alt="Diseño de la sonrisa" width="470" height="212" class="size-medium wp-image-276 img-responsive" />
              <p class="wp-caption-text">Diseño de la sonrisa</p>
            </div>
          </div>
          <h3> ¿Qué significa diseño de sonrisa?</h3>

          <div>
            <p>Diseño de sonrisa es lo que se hace para establecer una armonía entre la cara de una persona y sus dientes, teniendo en cuenta la textura, forma, color, ángulos y tamaño de los mismos, manteniendo un equilibrio natural.</p>
            <p>Cada persona necesita un tratamiento a medida/personalizado e individual para encontrar su sonrisa perfecta y para cada uno de ellos hemos de trabajar en búsqueda de una solución.</p>
            <p>Esta especialidad es utilizada para corregir espacios, colores, tamaños, formas ubicación; para aportarle a su sonrisa armonía y equilibrio.</p>
          </div>
        </div>
      </div>
      <div class="collapse" id="coronas-de-porcelana">
        <h3>Coronas de porcelana</h3>

        <div class="accordion">
          <h3> ¿Qué son las coronas de porcelana?</h3>

          <div>
            <p>Las coronas de porcelana son comúnmente conocidas como fundas, van sobre la raíz del diente devolviéndole su forma.</p>
          </div>
          <h3> ¿Cuándo se usan las coronas de porcelana?</h3>

          <div>
            <p>Están indicadas cuando:</p>
            <ul>
              <li>Devolver forma a un diente</li>
              <li>Mejorar la forma en un diente</li>
              <li>Mejor inclinación o ubicación de un diente</li>
              <li>Corregir color de un diente</li>
              <li>Sobre implantes dentales</li>
              <li>Suplantar diente perdidos</li>
            </ul>
            <div id="attachment_219" style="width: 180px" class="wp-caption aligncenter">
              <a href="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/07/caso2a_2.png">
                <img src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/07/caso2a_2-170x150.png" alt="casos" width="170" height="150" class="size-thumbnail wp-image-219 img-responsive" />
              </a>

              <p class="wp-caption-text">casos</p>
            </div>
            <div id="attachment_220" style="width: 180px" class="wp-caption aligncenter">
              <a href="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/07/corona_porcelana_libre_metal.png">
                <img src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/07/corona_porcelana_libre_metal-170x150.png" alt="Corona porcelana" width="170" height="150" class="size-thumbnail wp-image-220 img-responsive" />
              </a>

              <p class="wp-caption-text">Corona porcelana</p>
            </div>
          </div>
          <h3> Más información</h3>

          <div>
            <div class="col-sm-2">
              <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#protesis" aria-expanded="false">Protesis</button>
            </div>
          </div>
        </div>
      </div>
      <div class="collapse" id="carillas">
        <h3>Carillas</h3>

        <div class="accordion">
          <h3> ¿Qué son las carillas?</h3>

          <div>
            <p>La carilla es una delgada lamina de material estético (color del diente) que es colocada en la parte de adelante del diente para darle la forma y color que necesitemos, logrando así dientes estéticos.</p>
            <p>Hay personas que tienen sus dientes feos, o no tienen toda la estetica que el paciente necesita. Para estos pacientes su solución puede ser coronas/fundas de pocelana o bien las carillas dentales.</p>
            <p>Las carillas, miden de 2 a 4 mm, que se hace a medida para cada diente del paciente, y se coloca en la parte visible del mismo.</p>
            <div id="attachment_181" style="width: 480px" class="wp-caption aligncenter">
              <img class="size-medium wp-image-181 img-responsive" src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/colocacion-carillas-dentales-470x219.jpg" alt="Colocacion Carillas Dentales" width="470" height="219" />
              <p class="wp-caption-text">Colocacion Carillas Dentales</p>
            </div>
            <div id="attachment_275" style="width: 410px" class="wp-caption aligncenter">
              <img src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/carillas-antes.jpg" alt="Dientes antes" width="400" height="194" class="size-full wp-image-275 img-responsive" />
              <p class="wp-caption-text">Dientes antes</p>
            </div>
            <div id="attachment_274" style="width: 410px" class="wp-caption aligncenter">
              <img src="http://clinicaodontologiayestetica.com/wp-content/uploads/2015/05/carillas-despues.jpg" alt="Dientes después (con carillas)" width="400" height="194" class="size-full wp-image-274 img-responsive" />
              <p class="wp-caption-text">Dientes después (con carillas)</p>
            </div>
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="//www.youtube.com/embed/eu6lNL5d5rA"></iframe>
            </div>
          </div>
          <h3> ¿En que consiste el tratamiento?</h3>

          <div>
            <p>Consiste en desgastar el elemento dentario por la parte de adelante (vestibular) entre 2 a 4 mm. Luego dependiendo del tipo de carilla que se elija, se mandara a hacer la de porcelana o se hará en el momento la de composite a mano alzada por
              el odontólogo especialista.</p>
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zmEDcjZFKuc"></iframe>
            </div>
          </div>
          <h3> Tipos de carillas</h3> 
          <div>
            <p>Según el material las carillas pueden ser de composite y de porcelana. Ambas tiene la misma estética excelente, sin embargo las de porcelana llevan mucho mas trabajo y duran mas tiempo, pero ambas son recomendables.</p>
          </div>
          <h3> ¿Cuánto duran?</h3>

          <div>
            <p>Los dos tipos de carillas duran años, lo ideal es controlarse una vez por año para revisarlas, pero pueden durar muchos años cada una.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>