0

私はこれで障害に遭遇しましたが、このスクリプトがテスト ページで実行されない理由について頭を悩ませているようには見えません。私はjqueryをリンクしており、その後にこのスクリプトが続きます。これは私の唯一のスクリプトなので、js の競合ではないことはわかっています。ここでフィドル：http://jsfiddle.net/dXWAY/7

var content = $('.content').hide();

$('.toggleBtn').on('click', function() {
    $(this).next('.content').slideToggle();
    return false;
});

.toggleBtn {
    background:deepskyblue;
    display:block;
    float:Left;
    width:100%;
    padding:10px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    color:#fff;
    cursor:pointer;
}

.content {
    background:skyblue; 
    float:left;
    overflow:hidden;
    width:100%;
    padding:10px;
}

 <a class="toggleBtn">Click Me!</a>

<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus porro modi ut itaque ipsum natus explicabo vero sequi beatae libero voluptatibus sit culpa debitis tempore! Sint eum ipsum consequatur!</div>
4

1 に答える 1

2

あなたの問題 (ライブの例) は、DOM がロードされる前に( HEADセクションで) 記述した JS スクリプトを実行していることです。

簡単な修正は、ドキュメントの準備ができた後にのみそのスクリプトを実行することです。これは、 document.ready()に入力するだけで実現できます。

<script>
$(document).ready(function () {
    var content = $('.content').hide();

    $('.toggleBtn').on('click', function() {
        $(this).next('.content').slideToggle();
        return false;
    });
 });
</script>
于 2013-08-24T00:19:30.777 に答える