0

http://jsfiddle.net/CCKUz/

<span class="open">だから私はコンテンツを表示するために折りたたみ可能なdivの高さを増やすボックスを持っています。CSSの高さだけで折りたたみ可能で、クリックを開く機能で高さを自動に設定します。簡単で、これは機能します。

オープンスパンとクローズスパンを追加しようとすると、問題が発生します。それらを実際のhtmlに含めると、正常に機能します。それらを追加すると、機能しなくなります。これは、ロード後に作成されたため、jsが.click関数を適用できないことが原因であると考えましたが、同じ関数で作成して.clickを適用しても、この問題は解決しません。

これに影響を及ぼしている可能性のあるものはありますか？ありがとう。

HTML：

<div class="box collapsible">
    <h3>Title</h3>
    <p>This is a sample paragraph that is here for placer purposes.</p>
</div>

CSS：

.box { height: 20px; border: 1px solid #000000; padding: 10px; margin: 20px; position:   relative; overflow: hidden; }
h3 { margin: 0 0 20px 0; line-height: 20px; }
.open, .close { text-indent: -9999px; width: 20px; height: 20px; position: absolute; top:  10px; right: 10px; }
.open { background: #00ff00; }
.close { background: #0000ff; }

JS：

$(function(){
        var box = $(".collapsible");
        var close = $(".collapsible span.close");
        var open = $(".collapsible span.open");
        box.each(function(){
            box.append('<span class="open">Open</span>');
            open.each(function(i){
                open.click(function(){
                    alert("You clicked open");
                    $(this).parent(box).css("height","auto").append('<span class="close">Close</span>');
                    $(this).hide();
                    $(this).parent().find(close).show();
                });
            });
            close.each(function(i){
                close.click(function(){
                    $(this).parent(box).css("height","15px");
                    $(this).hide();
                    $(this).parent().find(open).show();
                });
            });
        });
    });
4

4 に答える 4

2

ループは必要ありません。jQuery はそれを内部で行います。次のように、動的要素を持つ委任されたイベント ハンドラーが必要です。

$(function () {
    var box = $(".collapsible");
    box.append( $('<span />', {'class':'open'}) )
       .on('click', '.close', function () {
         $(this).hide()
                .closest('.collapsible')
                .css("height", "auto")
                .append( $('<span />', {'class':'close'}).show() );
    })
      .on('click', '.close', function () {
          $(this).hide()
                 .closest('.collapsible')
                 .css("height", "15px")
                 .find('.open').show();
    });
});
于 2013-02-18T15:29:43.250 に答える
1

それらを追加する前に、開いている要素を選択します。

var open = $(".collapsible span.open");

これを試して：

$(function(){
        var box = $(".collapsible");
        var close = $(".collapsible span.close");

        box.each(function(){
            box.append('<span class="open">Open</span>');
            var open = $(".collapsible span.open"); //do it here!!
            open.each(function(i){
                open.click(function(){
                    alert("You clicked open");
                    $(this).parent(box).css("height","auto").append('<span class="close">Close</span>');
                    $(this).hide();
                    $(this).parent().find(close).show();
                });
            });
            close.each(function(i){
                close.click(function(){
                    $(this).parent(box).css("height","15px");
                    $(this).hide();
                    $(this).parent().find(open).show();
                });
            });
        });
    });
于 2013-02-18T15:29:32.623 に答える
0

.each関数をデリゲートする必要はありません

$(document).on('click','.collapsible span.open',function(){

デモはこちらhttp://jsfiddle.net/CCKUz/2/

于 2013-02-18T15:27:18.237 に答える
0

問題は、.closeスパンを動的に追加しているため、最初の検索で何も見つからず、クリック ハンドラーが追加されないことです。イベント委任を使用すると、これを簡単に修正できます。

.on('click', 'span.close', function(evt){

コードを大幅に簡素化することもできます。

$(".collapsible")
  .append('<span class="open">Open</span>')
  .on('click', 'span.open', function(evt){
    // Search within the parent '.collapsible'.
    $(evt.delegateTarget)
      .css("height", "auto")
      .append('<span class="close">Close</span>');

    // Hide the '.open' span.
    $(this).hide();
  })
  .on('click', 'span.close', function(evt){
    // Search within the parent '.collapsible'.
    $(evt.delegateTarget)
      .css("height","15px");
      .find('.open').show();

    // Remove the old '.close' button since the
    // open handler will make a new one.
    $(this).remove();    
  })
于 2013-02-18T15:34:40.027 に答える