0

ID（#itemと#content）に割り当てられた関数を取得しました。しかし、クラスで動作するように書き直すにはどうすればよいですか?

window.addEvent('domready', function() {

    var myVerticalSlide = new Fx.Slide('content');

    $('item').addEvent('click', function(event){
        event.stop();
        myVerticalSlide.toggle();
    });
});
4

2 に答える 2

0

私が正しく理解していれば、「アイテム」の数と「コンテンツ」の数は同じになります。それのようなものを試してください

<script>
    window.addEvent('domready', function() {
        $$('.item').each(function(el,ind){
            new Fx.Slide($$('.content')[ind]).hide();
            el.addEvent('click', function(event){
                event.stop();
                var myVerticalSlide = new Fx.Slide($$('.content')[ind]).toggle();
            }); 
        })
    });
</script>
于 2013-03-07T15:29:03.817 に答える
0

コード全体は次のとおりです。

    <style type="text/css">
    .wrapper{
        max-width:613px;
        float:left;
        position:relative;
    }
    .new { 
        border: solid 1px #ddd; 
        padding: 5px; 
        float:left;
        max-width:660;
        min-width:320px;
    }
    .item{
        width:120px;
        padding:10px;
        display:block;
        background-color:#CCC;
        float:left;
        margin:5px;
    }
    .content{
        padding:10px;
        height:80px;
        visibility:hidden;
    }
    .item:hover > .content{

    }
    .full{
        position:absolute;
        width:100%;
        display:block;
        height:100px;
        background-color:#666;
        left:0px;
    }
  </style>

<script type='text/javascript'>//<![CDATA[ 

window.addEvent('load', function() {
(function(){
    var wrap,
        overview = document.getElement('div.overview');

    overview.getElements('div.item').each(function(a, i){
        if (i % 4 == 0){
            wrap && overview.adopt(wrap);
            wrap = new Element('div.new');
        }
        wrap.adopt(a);
    });

    overview.adopt(wrap);
}());
});
window.addEvent('domready', function() {
        $$('.item').each(function(el,ind){
            new Fx.Slide($$('.content')[ind]).toggle();
            el.addEvent('click', function(event){
                event.stop();
                var myVerticalSlide = new Fx.Slide($$('.content')[ind]).toggle();
            }); 
        })
    });//]]>  
</script>
</head>
<body>
<div class="wrapper">
    <div class="overview">
        <div  class="item">Test1
        <div  class="content">
            <div class="full">
                <p>Content1</p>
            </div>
        </div>
        </div>
        <div class="item">Test2
        <div class="content">
            <div class="full">
                <p>Content2</p>
            </div>
        </div></div>
        <div class="item">Test3
        <div class="content">
            <div class="full">
                <p>Content3</p>
            </div>
        </div></div>
        <div class="item">Test4
        <div class="content">
            <div class="full">
                <p>Content4</p>
            </div>
        </div></div>
        <div class="item">Test5
        <div class="content">
            <div class="full">
                <p>Content5</p>
            </div>
        </div></div>
        <div class="item">Test6
        <div class="content">
            <div class="full">
                <p>Content6</p>
            </div>
        </div></div>
        <div class="item">Test7
        <div class="content">
            <div class="full">
                <p>Content7</p>
            </div>
        </div></div>
        <div class="item">Test8
        <div class="content">
            <div class="full">
                <p>Content8</p>
            </div>
        </div></div>
        <div class="item">Test9
        <div class="content">
            <div class="full">
                <p>Content9</p>
            </div>
        </div></div>
        <div class="item">Test10
        <div class="content">
            <div class="full">
                <p>Content10</p>
            </div>
        </div></div>
        <div class="item">Test11
        <div class="content">
            <div class="full">
                <p>Content11</p>
            </div>
        </div></div>
    </div>
</div>

もう1つは、最初のdivをクリックすると開き、2番目のdivをクリックすると開きますが、2番目のdivをクリックすると最初のdivが閉じます。

于 2013-03-08T06:53:29.070 に答える