0

Accordion 在 IE8 中不起作用...我已经尝试了该站点上的几种解决方案。没运气。在这一点上，任何帮助都会很棒。

带有 JQuery 的 HTML：

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!--
        Load CSS
    -->
    <!--
        Load jQuery Api and accordion.js
    -->
    <script src="jquery.min.js"></script>
    <script src="accordion.js"></script><script language="javascript">
 $(function(){
 $('.accordion header').bind('click', function() {
        var self = $(this),
            wrapper = self.parent(),
            activeClosedHeight = $('.opened header').outerHeight(),
            minHeight = self.outerHeight(),
            contentHeight = wrapper.find('.content').outerHeight();

        /* Conditional to determine current state */
        if ( !wrapper.hasClass('opened') ) {

            // Close other opened accordions than this
            $('.opened')
                .css({
                    "height" : activeClosedHeight
                })
                .removeClass('opened');

            // Now add a class to the clicked accordion and set height
            // CSS transitions will animate the height
            wrapper
                .addClass('opened')
                .height(contentHeight + minHeight);

        } else if ( wrapper.hasClass('opened') ) {

            // Remove opened class and set the original height
            // Again CSS3 will handle the slideIn animation
            wrapper
                .removeClass('opened')
                .height(minHeight);
        }
    });
});</script>   

<link href="files/CSS/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<!-- Wrapper -->
<div style="float:left">
<div class="accordion" style="cursor: hand;">
    <!-- Trigger -->
    <header>
        <h3>Business Skills</h3>
    </header>

    <!-- Content Section -->
    <section class="content">
   <a href="#" title="Business Communications" target="_blank">Business Communications</a>
   <a href="#" title="Call Center" target="_blank">Customer Service</a>
    <a href="#" title="General Business Skills" target="_blank">General Business Skills</a>
    <a href="#" title="Human Resources" target="_blank">Human Resources</a>
    <a href="#" title="International Business" target="_blank">International Business</a>
    <a href="#" title="Management & Leadership" target="_blank">Management & Leadership</a>
    <a href="#" title="Nonprofit" target="_blank">Nonprofit</a>
    <a href="#" title="Operations" target="_blank">Operations</a>
    <a href="#" title="Sales & Marketing" target="_blank">Sales & Marketing</a>
    </section>
</div>

CSS:
@charset "utf-8"; /* CSS 文档 */ :hover { /点击时禁用刺激性灰度框 */ -webkit-tap-highlight-color: rgba(0,0,0,0); }

body {
    background: #ffffff;
}

.accordion {
    overflow: hidden;
    margin: 0px auto 0px auto;
    width: 280px;
    background: #ffffff;
    height: 60px;

    /* Force hardware acceleration */
    -moz-transform: translate3d(0,0,0); /* Firefox 4 */
    -webkit-transform: translate3d(0,0,0); /* Safari and Chrome */
    -o-transform: translate3d(0,0,0); /* Opera */
    -ms-transform: translate3d(0,0,0); /* IExplorer 10 */
    transform: translate3d(0,0,0);

    /* Set those CSS3 transistions */
    -moz-transition:height 0.8s; /* Firefox 4 */
    -webkit-transition:height 0.8s; /* Safari and Chrome */
    -o-transition:height 0.8s; /* Opera */
    -ms-transition: height 0.8s; /* IExplorer */
    transition:height 0.8s;
}
    .accordion header {
        /* This is the closed state */
        background: url("files/images/arrows.png") 253px -17px no-repeat;
        height: 60px;
        text-align: left;
        width: 100%;

        /* To align the two elements horizontally without floats */
        display: table;
    }
    .accordion.opened header {
        background: url("files/images/arrows.png") 253px 23px no-repeat;
    }
        header img,
        header h3 {
            /* Nested elements get table-cell for horizontal alignment */
            display: table-cell;
            vertical-align: middle;
        }
        header img {
            text-align: left;
            opacity: 0.5;
            width: 60px;
            margin: 0 auto;
        }
        header h3 {
            font-family: arial;
            font-size: 1em;
            color: #666666;
            text-align: left;
            width: 170px;
            padding: 0 30px 0 10px;
        }
    .accordion .content {
        padding: 10px 20px 10px 20px;
    }
        .accordion .content p,
        .accordion .content a {
            font-family: arial;
            font-size: 14px;
            line-height: 22px;
            text-align: justify;
            text-justify: inter-word;
            color: #666666;
        }
        .accordion .content p {
            margin: 0 0 10px 0;
        }
        .accordion .content a {
            margin: 10px 0 10px 0;
            background: grey;
            display: block;
            height: 32px;
            padding: 8px 0 0 0;
            color: #FFFFFF;
            text-decoration: underline;
            text-align: center;
        }
4

0 回答 0