0

私は単純なjqueryの表示と非表示を持っていますが、これがあれば少し助けが必要です

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

});

</script>

そしてCSS

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}

Adn シンプルな Html

<a href="#" class="show_hide">Show</a>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>

私が必要とするのは、誰かがSHOWをクリックすると要素が開くことですが、誰かがSHOWをクリックしてDIV要素が開いているときにSHOWをHIDEに変更し、誰かがHIDEをクリックすると再びSHOWに変更し、問題は、多くの隠し要素があることです。どうすればいいですか? 例 ページに多くのslideDIVがありますが、hrefに接続されているものだけを開きたいです

4

3 に答える 3

2

変化する： 

$('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
});

に：

 $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();

    if($(this).text() == "Show" ? $(this).text("Hide") : $(this).text("Show"));
 });

編集した質問の更新:

関連する div のみを変更するには、このコードを使用します (クリックされた href への次の .slidingDiv を取得します)。

$('.show_hide').click(function(){
     $(this).next(".slidingDiv").slideToggle();

     if($(this).text() == "Show" ? $(this).text("Hide") : $(this).text("Show"));
});

ここでこれが機能していることを確認できます: http://jsfiddle.net/EYnhk/

于 2013-04-16T08:24:48.250 に答える
0

これを試して....

$(document).ready(function(){
    $(".slidingDiv").hide();
    $('.show_hide').click(function(){
        if( $(this).html()=="Show"){
            $(this).html("Hide");
        }
        else{
            $(this).html("Show");
        }
    $(".slidingDiv").slideToggle();
    });
});

ここ

于 2013-04-16T08:42:05.227 に答える
0

あなたが使用することができます:

<script type="text/javascript">
    $(document).ready(function(){
        $(".slidingDiv").hide();
        $(".show_hide").show();
        $('.show_hide').click(function(){
            $(".slidingDiv").Toggle();
            if ($('.show_hide').text() == "Show"){
                $('.show_hide').text('hide');
            }else {
                $('.show_hide').text('Show');
            }
        });       
    });
</script>
于 2013-04-16T08:27:50.110 に答える