1

最初は閉じているjQueryアコーディオンを提示しようとしています。現在、ページを開くと最初のタブが開き、デフォルトで閉じて、タブをクリックすると開くようにしたいと思います。

任意の支援をいただければ幸いです。

<style>
#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #7d8d96;
width:960px;}

#accordion li {
float: left;
border-left:
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}

#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}

#accordion li.active {
width: 450px;
}
</style>

<ul id="accordion">
  <li>
    <img src="images/section_1.png" />
    <strong>Section 1 Header</strong><br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
  </li>
  <li>
    <img src="images/section_2.png" />
    <strong>Section 2 Header</strong><br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
  </li>
  <li>
    <img src="images/section_3.png" />
    <strong>Section 3 Header</strong><br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
  </li>
  <li>
    <img src="images/section_4.png" />
    <strong>Section 4 Header</strong><br/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<script type="text/javascript">
$(document).ready(function(){


activeItem = $("#accordion li:first");
$(activeItem).addClass('active');

$("#accordion li").click(function(){
    $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
    $(this).animate({width: "450px"}, {duration:300, queue:false});
    activeItem = this;
});

});
</script>
4

2 に答える 2

1

セレクターは変数に依存するactiveItemため、最初にそれを定義するだけでよく、activeその最初の要素にクラスを追加する必要はありません。

これを試して：

$(document).ready(function(){
var activeItem;
$("#accordion li").click(function(){
    $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
    $(this).animate({width: "450px"}, {duration:300, queue:false});
    activeItem = this;
});
});

デモはこちら

編集：（
開閉する）

$(document).ready(function(){
    var activeItem;
    $("#accordion li").click(function(){
        if(activeItem == this){
            $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
             activeItem = '';
        }else{ 
            $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
            $(this).animate({width: "450px"}, {duration:300, queue:false});
            activeItem = this;
        } 
    });
});

デモはこちら

于 2013-09-16T17:16:33.160 に答える
0

あなたがする必要があるのはこれだけです：

$(document).ready(function()
{
    $( "#accordion" ).accordion({ active: false });
}

オプション active は、アクティブな「パネル」がない場合 (false)、アコーディオンのアクティブな「パネル」を設定します。

次に、パネルをクリックすると、「アクティブ」オプションがこの「パネル」インデックスに設定されます。

于 2013-09-16T17:18:10.467 に答える