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

添加简单的 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，并且问题是我会有很多隐藏的元素，怎么做？例如我将在页面上有很多slidingDIV，但我想打开那个连接到那个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，请使用此代码（将下一个 .slidingDiv 获取到单击的 href）：

$('.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

您可以使用：

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