Question

我手风琴将有3-4个元素，每个手风琴的内容将在手风琴的手风琴上显示，当点击任何一个手风琴时

让我们说我有手风琴..

ONE
TWO
THREE

默认情况下，accordion应显示最后一个手风琴元素

之后的折叠内容

像

ONE (This is active on page load)
TWO
THREE
accordion  contents should show up here & for other shoul also show up here when a user

点击任何手风琴（ONE，TWO.THREE）

小提琴http://jsfiddle.net/gmcLnowa/9/

<div class="header"> this is a header</div>
<div class="contents"> <p>Page text will be here </p>
<p>Page text will be here </p>
<p>Page text will be here </p>
<p>Page text will be here </p>
<p>Page text will be here </p></div>
<div id="accordion">
    <ul>
        <li> <a href="#one">Example one</a>

        </li>
        <li> <a href="#two">Example two</a>

        </li>
        <li> <a href="#three">Example three</a>

        </li>
    </ul>
    <div id="one" class="accordion">ONE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.</div>
    <div id="two" class="accordion">TWO Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.</div>
    <div id="three" class="accordion">THREE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.</div>
</div>

默认情况下，当点击事件被触发以显示第一个手风琴的内容时，它会向上滚动。如何在手风琴之间导航时停止滚动。

Answer 1

您的问题确实非常误导，因为这不是accordion。

然而，为了解决您的滚动问题，这是因为您使用目标锚点（http://www.w3.org/TR/WD-html40-970917/struct/links.html）作为链接，默认行为是跳转到引用的位置。

您需要做的是将href更改为某些其他属性，例如data属性，然后做出相应的反应。

演示：http://jsfiddle.net/gmcLnowa/12/

CSS改为：

a[data-mytarget="#one"].active{
    background:blue !important;
}
a[data-mytarget="#two"].active{
    background:red !important;
}
a[data-mytarget="#three"].active{
    background:yellow !important;
}

JS改为：

$("a").click(function(){
    $(".active").removeClass("active");
    var mytarget = $(this).data('mytarget');
    $('.accordion').hide();
    $(mytarget).show();
    $(this).addClass("active");
})
$("a:first")[0].click()

和HTML更改为：

<ul>
    <li> <a data-mytarget="#one">Example one</a>

    </li>
    <li> <a data-mytarget="#two">Example two</a>

    </li>
    <li> <a data-mytarget="#three">Example three</a>

    </li>
</ul>

Answer 2

您可以使用jquery为基本的简单手风琴尝试以下代码。

$(document).ready(function (e) {
    $('.item').click(function (e) {
        if ($(this).next('.item-data').css('display') != 'block') {
            $('.active').slideUp('fast').removeClass('active');
            $(this).next('.item-data').addClass('active').slideDown('slow');
        } else {
            $('.active').slideUp('fast').removeClass('active');
        }
    });
});

<强> MARKUP

<div class='container'>
    <div class='item'>Item 1</div>
    <div class='item-data'>
        <div>This is the content for Accordion 1</div>
    </div>
    <div class='item'>Item 2</div>
    <div class='item-data'>
        <div>This is the content for Accordion 2</div>
    </div>
    <div class='item'>Item 3</div>
    <div class='item-data'>
        <div>This is the content for Accordion 3</div>
    </div>
    <div class='item'>Item 4</div>
    <div class='item-data'>
        <div>This is the content for Accordion 4</div>
    </div>
</div>

<强> WORKING DEMO

当我们在手风琴中导航时，手风琴向下滚动

2 个答案: