Question

以下是视图的website。

首先，我是JavaScript的新手，所以这就是我在这里推迟社区的原因。

我在网站首页的中央栏中有一个简单的手风琴盒。它工作得很好，但我希望手风琴的“2014节目”部分在页面加载时打开。否则，标题最初看起来是空的，直到被点击为止。那行不通！

*注意：我的确计划在手风琴的每个标题旁边添加一点上/下箭头，以使其更加明显，实际上是手风琴。

这是html：

<div class="accordionButton">
    <h1>2014 Shows</h1>
</div>
<div class="accordionContent">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
</div>
<div class="accordionButton">
    <h1>2013 Shows</h1>
</div>
<div class="accordionContent">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
</div>

相应的CSS：

.accordionButton {  
    width: 320px;
    float: left;
    cursor: pointer;
}

.accordionContent { 
    width: 320px;
    float: left;
    display: none;
}

以及相应的脚本：

$(document).ready(function() {

    //ACCORDION BUTTON ACTION
    $('div.accordionButton').click(function() {
    //MAKE THE ACCORDION CLOSE ON THE SECOND CLICK
        if ($('div.accordionContent').hasClass('openDiv')) {
            $('div.accordionContent').slideUp('normal');
            $(this).next().removeClass('openDiv');
        }
        else {
            $('div.accordionContent').slideUp('normal');
            $(this).next().slideDown('normal');
            $(this).next().addClass('openDiv');
        }
    });
    //HIDE THE DIVS ON PAGE LOAD
    $("div.accordionContent").hide();

});

Answer 1

你这个代码折叠了所有的div：

$("div.accordionContent").hide();

更改选择器以隐藏除第一个之外的所有选择：

$("div.accordionContent").slice(1).hide();

请参阅CSS Reference和Slice以获取进一步的帮助。

Answer 2

声明display：none的CSS;把事情做好，做了一些分离的任务。如果我们有JavaScript并且要用它来调整可见性，那么我们应该使用JS来完成所有工作。如果没有JavaScript，则用户不会遗漏任何信息。

风格，小变化：

    .accordionButton {  
        width: 320px;
        float: left;
        cursor: pointer;
    }

    .accordionContent { 
        width: 320px;
        float: left;
    }

否则，我更改了你的div的html来声明我们想要在html中看到哪些，这样就更容易维护和布局。

身体中的HTML：

<div class="accordionButton">
        <h1>2014 Shows</h1>
    </div>
    <div class="accordionContent openDiv">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>

    <div class="accordionButton">
        <h1>2013 Shows</h1>
    </div>
    <div class="accordionContent closedDiv">
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
    </div>

然后我收紧了JavaScript，因为只有两个元素，点击“按钮”将显示一个并隐藏另一个。但现在应该更容易将这种行为交替到你喜欢的任何行为。

和脚本：

    //ACCORDION BUTTON ACTION
    $('.accordionButton').click(function() {
        //MAKE THE ACCORDION CLOSE ON THE SECOND CLICK
        $('.accordionContent.openDiv').slideUp('normal', function() {
            $(this).removeClass('openDiv').addClass('closedDiv');
        });
        $('.accordionContent.closedDiv').slideDown('normal', function() {
            $(this).removeClass('closedDiv').addClass('openDiv');
        });
    });

    //HIDE THE DIVS ON PAGE LOAD
    $(".accordionContent.closedDiv").eq(0).hide();

Answer 3

解决方案比我最初的想法更优雅。它涉及改变整个方法。

HTML：

<div id="accordion">
    <h1 class="accordion-toggle">2014 Shows<img style="vertical-align:middle; padding-left:5px;" src="media/down_accordion.gif" width="10px" height="5px" /></h1>
        <div class="accordion-content default">
            <p>AUG 1-3 Fire &amp; Water Music Festival<br />Lac Du Bonnet, MB | Time TBA</p>
            <p>MAR 19 black-eyed SUZIE Studio w/ West My Friend<br />Minitonas, MB | 7:00PM</p>
            <p>JAN 1 New Year's House Concert<br />Gilbert Plains, MB | 8:00PM</p>
        </div>
    <h1 class="accordion-toggle">2013 Shows<img style="vertical-align:middle; padding-left:5px;" src="media/down_accordion.gif" width="10px" height="5px" /></h1>
        <div class="accordion-content">
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
        </div>
</div>

CSS：

.accordion-toggle {
    cursor: pointer;
}

.accordion-content {
    display: none;
}

.accordion-content.default {
    display: block;
}

爪哇：

<script type="text/javascript">
    $(document).ready(function($) {
        $('#accordion').find('.accordion-toggle').click(function(){

        //Expand or collapse this panel
        $(this).next().slideToggle('fast');

        //Hide the other panels
        $(".accordion-content").not($(this).next()).slideUp('fast');

        });
    });
</script>

看起来效果很好！感谢大家的投入。你的想法让我研究了一些新的东西。 Java对我来说仍然有点陌生。

需要帮助在网页上修改基于JavaScript的手风琴盒

3 个答案: