Question

我试图使用.accordion然而它似乎没有用。这就是我的想法：

<link href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").accordion();
    })
</script>

这就是我身体里的一切：

<div id="mainContent">
    <h1>This is an According Example</h1>
    <div id="accordion" style="width:1024px;">
        <h3><a href="#">Heading for first sentence</a></h3>
        <div>
            <p>This is the first sentence.</p>
        </div>
        <h3><a href="#">Heading for second sentence</a></h3>
        <div>
            <p>This is the second sentence.</p>
        </div>
        <h3><a href="#">Heading for third sentence</a></h3>
        <div>
            <p>This is the third sentence.</p>
        </div>
    </div>

请帮忙！这是一个编辑：

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
    window.onload = function () 
        { $(document).ready(function () 
            { $("#accordion").accordion(); 
        }) 
    };
</script>
</head>
<body>
    <div id="mainContent">
    <h1>This is an According Example</h1>
    <div id="accordion" style="width:1024px;">
        <h3><a href="#">Heading for first sentence</a></h3>
        <div>
            <p>This is the first sentence.</p>
        </div>
        <h3><a href="#">Heading for second sentence</a></h3>
        <div>
            <p>This is the second sentence.</p>
        </div>
        <h3><a href="#">Heading for third sentence</a></h3>
        <div>
            <p>This is the third sentence.</p>
        </div>
    </div>
</body>

Screenshot

Answer 1

问题是您在加载HTML之前运行.arcordion()。您必须在DOM中创建的元素之后调用它：

<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

And this is what I have in my body:
<div id="mainContent">
    <h1>This is an According Example</h1>
    <div id="accordion" style="width:1024px;">
        <h3><a href="#">Heading for first sentence</a></h3>
        <div>
            <p>This is the first sentence.</p>
        </div>
        <h3><a href="#">Heading for second sentence</a></h3>
        <div>
            <p>This is the second sentence.</p>
        </div>
        <h3><a href="#">Heading for third sentence</a></h3>
        <div>
            <p>This is the third sentence.</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").accordion();
    })
</script>

然而标准方法是在dom加载后通过window.onload执行此操作：

<script type="text/javascript">
    window.addEventListener("load", function () {
        $(document).ready(function () {
            $("#accordion").accordion();
        })
    }
</script>

演示：

<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
    window.onload =  function () {
        $(document).ready(function () {
            $("#accordion").accordion();
        })
    }
</script>

And this is what I have in my body:
<div id="mainContent">
    <h1>This is an According Example</h1>
    <div id="accordion" style="width:1024px;">
        <h3><a href="#">Heading for first sentence</a></h3>
        <div>
            <p>This is the first sentence.</p>
        </div>
        <h3><a href="#">Heading for second sentence</a></h3>
        <div>
            <p>This is the second sentence.</p>
        </div>
        <h3><a href="#">Heading for third sentence</a></h3>
        <div>
            <p>This is the third sentence.</p>
        </div>
    </div>
</div>

Answer 2

这是您手风琴的标记：

<div class="main">
        <div class="accordion">
            <div class="accordion-section">
                <a class="accordion-section-title" href="#accordion-1">Section #1</a>
                <div id="accordion-1" class="accordion-section-content">
                    <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? </p>
                </div><!--end .accordion-section-content-->
            </div><!--end .accordion-section-->

            <div class="accordion-section">
                <a class="accordion-section-title" href="#accordion-2">Section #2</a>
                <div id="accordion-2" class="accordion-section-content">
                    <p>Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
                </div><!--end .accordion-section-content-->
            </div><!--end .accordion-section-->

            <div class="accordion-section">
                <a class="accordion-section-title" href="#accordion-3">Section #3</a>
                <div id="accordion-3" class="accordion-section-content">
                    <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. </p>
                </div><!--end .accordion-section-content-->
            </div><!--end .accordion-section-->
        </div><!--end .accordion-->
    </div>

将此添加到您的css：

.accordion, .accordion * {
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box;
}

.accordion {
    overflow:hidden;
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
    border-radius:3px;
    background:#f7f7f7;
}

/*----- Section Titles -----*/
.accordion-section-title {
    width:100%;
    padding:15px;
    display:inline-block;
    border-bottom:1px solid #1a1a1a;
    background:#333;
    transition:all linear 0.15s;
    /* Type */
    font-size:1.200em;
    text-shadow:0px 1px 0px #1a1a1a;
    color:#fff;
}

.accordion-section-title.active, .accordion-section-title:hover {
    background:#4c4c4c;
    /* Type */
    text-decoration:none;
}

.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}

/*----- Section Content -----*/
.accordion-section-content {
    padding:15px;
    display:none;
}

这是javascript：

jQuery(document).ready(function() {
    function close_accordion_section() {
        jQuery('.accordion .accordion-section-title').removeClass('active');
        jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }

    jQuery('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = jQuery(this).attr('href');

        if(jQuery(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            jQuery(this).addClass('active');
            // Open up the hidden content panel
            jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });

请参阅此处小提琴中的示例：

https://jsfiddle.net/81tqnuj9/

jQuery .accordion不工作

2 个答案: