2

jquery を使用してコンテンツを展開/非表示にしています。次に、コンテンツの展開/非表示に使用されるリンクがボタンであり、それが壊れるように変更しました。ボタンに変更する前に動作するコードは次のとおりです。

<body>
<div class="content">
<a class="toggle" href="">Expand box 1</a>
<div class="contentHidden" style="display:none;">Hidden 1</div>
</div>
<div class="content">
<a class="toggle" href="">Expand box 2</a>
<div class="contentHidden" style="display:none;">Hidden 2</div>
</div>
</body>
<script type='text/javascript'>
$(function() {

    $(".toggle").click(function(event) {
        $(event.target).parent(".content").find(".contentHidden").toggle('slow');
        event.preventDefault()

    });

});
</script>

ただし、関数を次のように変更すると、機能しなくなります。

$(function() {

    $(".toggle").button({ icons: { primary: 'ui-icon ui-icon-arrowthick-1-e'} });
    $(".toggle").click(function(event) {
        $(event.target).parent(".content").find(".contentHidden").toggle('slow');
        event.preventDefault()

    });


});

button（）が階層を変更し、私の検索が「.contenthidden」divが返されなくなったかのように

よろしくデス

4

1 に答える 1

1

はい、JQuery UIbutton()は元のリンクの下に新しい階層を作成します (いくつかのスパンを追加します)。これらのスパンの 1 つは新しいクリック可能なアイテムであるため、この理由だけでうまくいかない (クリックされた要素が以前よりも 1 レベル深い) ため、closest代わりにparent次のように使用します。

$(".toggle").button({
    icons: {
        primary: 'ui-icon ui-icon-arrowthick-1-e'
    }
});
$(document).on('click', '.toggle', function (event) {
    $(event.target).closest(".content").find(".contentHidden").toggle('slow');
    event.preventDefault()

});

JSFiddle の作業はこちら: http://jsfiddle.net/HxKLy/

別の問題として、据え置き型を言う代わりにクリックを使用するということonは、この例では実際には厄介者ですが、参照用に以下に保持します。

クリックで特定のDOM要素にバインドすると、DOMを変更するとすぐにクリックイベントが切り離されます。on通常、 a の代わりに ofの遅延呼び出し構文を使用することをお勧めしますclickが、この場合は問題ありません。

例えば

$(document).on('click', '.toggle', function(event)...

それ以外の

$(".toggle").click(function(event)

それが実際の問題ではないことを証明するために、クリックバックを使用したフィドルのバリエーションを次に示します。

http://jsfiddle.net/HxKLy/1/

于 2013-10-01T14:18:26.813 に答える