0

タイトルがクリックされたときにコンテンツがポップアップするようにトリガーしようとしています。関数は次のとおりです。

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

            $(".event-info").hide(); // make sure all content in event-info class is hidden

            $(".event-title").click(function(){
        // find the .event-info within the same div as .event-title is and slide to         show
            $(".event-info").hide();    $(this).parent().children(".event-        info").toggle("slide", {direction: "up"}, 500);           })

    });
    </script>

私の問題は、実行時に一度だけ実行されることです! タイトルをクリックするとコンテンツがポップアップし、もう一度クリックすると閉じます。しかし、コンテンツをポップアップ表示するために 3 回クリックしても機能しません。だから私が求めているのは、コンテンツを好きなだけポップアップできるようにするには、この機能に何を追加/削除する必要があるかということです。

ありがとう！

アップデート！

HTMLは次のとおりです。

<html>
<div class="event-title"> Title that triggers content to appear is here </div>

<div class="event-info"> Content that appears is placed here</div>
</html>

***アップデート

わかりましたので、Aiias がそれを手に入れるのを手伝ってくれたので、コンテンツを無限に開いたり閉じたりできるようになりました。

jQuery(document).ready(function($) {
  $(".event-info").hide();
  $(".event-title").click(function() {
    $(this).parent().children(".event-info").slideToggle(500);
  });
});

すべてが機能しています！みんなありがとう！とても助かりました！

4

2 に答える 2

0

.event-infoトグルがこれを処理するため、クリック ハンドラー内でを非表示にする必要はありません。jQuery を使用してみてくださいslideToggle():

更新しました

jQuery(document).ready(function($) {
  $(".event-info").hide();
  $(".event-title").click(function() {
    var eventInfo = $(this).parent().children(".event-info");
    $('.event-info').not(eventInfo).slideUp();
    eventInfo.slideToggle();
  });
});

この動作中の更新されたjsFiddle デモを参照してくださいhttp://jsfiddle.net/9meXY/1/

于 2013-06-07T04:05:26.867 に答える
0

試す

jQuery(document).ready(function($){

    $(".event-info").hide(); // make sure all content in event-info class is hidden

    $(".event-title").click(function(){
        $(this).siblings(".event-info").toggle({
            easing: "slide", 
            direction: "up", 
            duration: 500
        });           
    })

});

デモ:フィドル

アップデート：

$(".event-title").click(function(){
    val el = $(this).siblings(".event-info").toggle({
        easing: "slide", 
        direction: "up", 
        duration: 500
    });
    (".event-info").not(el).hide();
})
于 2013-06-07T04:04:00.250 に答える