Question

我使用bootstrap主题在wordpress中工作，并使用bootstrap.its中的手风琴菜单在所有其他浏览器中正常工作但在IE 8中它不起作用，所有数据都被一个菜单覆盖到其他。

以下是acccordion菜单的代码：

 <div id="accordion2" class="accordion">
      <div class="accordion-group">
        <div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">B.A Honours Courses</a></div>
        <div id="collapseOne" class="accordion-body collapse">
          <div class="accordion-inner"><a href="http://pearlacademy.com/fashion-design/" class="accordion-toggle">Fashion Design</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/fashion-styling-image-design/" class="accordion-toggle">Fashion Styling & Image Design</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/textile-design-for-fashion-and-interiors/ " class="accordion-toggle">Textile Design for Fashion And Interiors</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/communication-design/" class="accordion-toggle">Communication Design</a></div>
          <div class="accordion-inner"><a href=" http://pearlacademy.com/ba-honours-courses/interior-architecture-and-design/" class="accordion-toggle">Interior Architecture and Design</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/interior-product-design/" class="accordion-toggle">Interior Product Design</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/jewellery-design/" class="accordion-toggle">Jewellery Design</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/fashion-media-communication/" class="accordion-toggle">Fashion Media Communication</a></div>
           <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/fashion-business-management/" class="accordion-toggle">Fashion Business Management</a></div>
            <div class="accordion-inner"><a href="http://pearlacademy.com/ba-honours-courses/fashion-marketing-and-retailing-management/" class="accordion-toggle">Fashion Marketing and Retailing Management</a></div>
        </div>
      </div>
      <div class="accordion-group">
        <div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">Postgraduate Diploma Courses</a></div>
        <div id="collapseTwo" class="accordion-body collapse">
          <div class="accordion-inner"><a href="http://pearlacademy.com/postgraduate-diploma-programmes/fashion-design/" class="accordion-toggle">Fashion Design</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/postgraduate-diploma-programmes/textile-design/ " class="accordion-toggle">Textile Design</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/postgraduate-diploma-programmes/fashion-retail/" class="accordion-toggle">Fashion Retail</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/postgraduate-diploma-programmes/fashion-marketing/" class="accordion-toggle">Fashion Marketing</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/postgraduate-diploma-programmes/garment-manufacturing/" class="accordion-toggle">Garment Manufacturing</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/postgraduate-diploma-programmes/fashion-merchandising/" class="accordion-toggle">Fashion Merchandising</a></div>
        </div>
      </div>
      <div class="accordion-group">
        <div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">Masters Courses</a></div>
        <div id="collapseThree" class="accordion-body collapse">
          <div class="accordion-inner"><a href="http://pearlacademy.com/masters-programmes/ma-design-fashion-and-textile/" class="accordion-toggle">MA Design(Fashion and Textile)</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/masters-programmes/ma-fashion-marketing/" class="accordion-toggle">MA Fashion Marketing</a></div>
        </div>
      </div>
       <div class="accordion-group">
        <div class="accordion-heading"><a class="accordion-toggle" href="#collapseFour" data-toggle="collapse" data-parent="#accordion2">Professional Diploma Courses</a></div>
        <div id="collapseFour" class="accordion-body collapse">
          <div class="accordion-inner"><a href="http://pearlacademy.com/professionals-diploma-courses/luxury-brands/" class="accordion-toggle">Luxury Brands</a></div>
         <div class="accordion-inner"><a href="http://pearlacademy.com/professionals-diploma-courses/fashion-and-lifestyle-ecommerce/" class="accordion-toggle">Fashion and Lifestyle Ecommerce</a></div>
        </div>
      </div>
      <div class="accordion-group">
        <div class="accordion-heading"><a class="accordion-toggle" href="#collapseFive" data-toggle="collapse" data-parent="#accordion2">Diploma Courses</a></div>
        <div id="collapseFive" class="accordion-body collapse">
      <div class="accordion-inner"><a href="http://pearlacademy.com/diploma-course/professional-photography-with-btk-germany/" class="accordion-toggle">Professional Photography with BTK Germany</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/diploma-course/styling-for-interiors/" class="accordion-toggle">Styling for Interiors</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/diploma-course/fashion-media-makeup/" class="accordion-toggle">Fashion Media Makeup</a></div>
          <div class="accordion-inner"><a href="http://pearlacademy.com/diploma-course/retail-operations/" class="accordion-toggle">Retail Operations</a></div>
       <div class="accordion-inner"><a href="http://pearlacademy.com/diploma-course/apparel-manufacturing/" class="accordion-toggle">Apparel Manufacturing</a></div>
        </div>
        </div>
        <div class="accordion-group">
        <div class="accordion-heading"><a class="accordion-toggle" href="#collapseSix" data-toggle="collapse" data-parent="#accordion2">Certificate Courses</a></div>
        <div id="collapseSix" class="accordion-body collapse">
          <div class="accordion-inner"><a href="http://pearlacademy.com/certificate-courses/creative-fashion-technology-in-womens-wear/" class="accordion-toggle">Creative Fashion & Technology in Women's Wear</a></div>
        </div>
      </div>
      </div>

以下是bootstrap中手风琴的CSS：

.accordion {
  margin-bottom: 20px;
}
.accordion-group {
  margin-bottom: 2px;
  /*border: 1px solid #e5e5e5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;*/
}
.accordion-heading {
  border-bottom: 0;
  background-color:#cccccc;
}
.accordion-heading .accordion-toggle {
  display: block;
  padding: 2px 4px;
  text-decoration:none;
  /*background-color:#e52b27;*/
}
.accordion-toggle {
  cursor: pointer;
  color:#5e5e5e;
  text-decoration:none;
}
.accordion-inner {
  padding: 2px 4px;
  border-top: 1px solid #e5e5e5;
  text-decoration:none;
}

Answer 1

手风琴有一个已知的IE错误：https://github.com/twitter/bootstrap/issues/4745

您需要将Bootstrap更新到最新版本。

手风琴菜单在IE8中不起作用

1 个答案: