Question

我有简单的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 simple 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上打开时将DOW元素打开时将SHOW更改为HIDE，当有人点击HIDE时，再次更改为SHOW ，问题是我将拥有许多隐藏的元素，如何做到这一点？例如，我将在页面上有许多slidingDIV，但我想打开那个连接到那个href的文件

Answer 1

更改：

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

要：

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

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

更新已修改的问题：

要更改相关的div，请使用此代码（获取下一个.slidingDiv到单击的href）：

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

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

你可以在这里看到这个：http://jsfiddle.net/EYnhk/

Answer 2

你可以使用：

<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>

Answer 3

试试这个......

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

Here

显示div并更改内容:)

3 个答案: