Question

这是我正在使用的代码（在本网站的其他地方找到），用于非常简单的slideToggle。

<script>
    $(document).ready(function () {
        $(".slidingDiv").hide();

        $('.show_hide').click(function (e) {
            $(".slidingDiv").slideToggle("fast");
            e.preventDefault();
        });
    });
</script>

HTML：

<div class="section-hold">
    <h4>Section</h4>
    <p><a href="#" class="show_hide">find out more >></a></p>       
</div>

<div class="slidingDiv">            
    <h4>My content.</p>
</div>

我想要的是当我点击显示slidingDiv时，我的“查找更多”链接消失，并且隐藏slidingDiv内容的切换是一个不同的链接，包含在该div本身内。所以HTML会变成这样：

<div class="section-hold">
    <h4>Section</h4>
    <p><a href="#" class="show">find out more >></a></p>        
</div>

<div class="slidingDiv">            
    <h4>My content.</p>
    <p><a href="#" class="hide">close this section</a></p>
</div>

有关如何实现这一目标的任何想法？请注意，此页面上还有几个部分，因此理想情况下，代码可以在页面上多次重复执行。

如果它有所作为，我现在正在使用jQuery 1.11.0。

非常感谢。

Answer 1

这可能是您正在寻找的。我编写了它，因此它应该可以在同一页面上重复使用。

首先（为了帮助重新使用），将你的html包装在另一个<div>中，以便你拥有：

<div class="sliderContainer">
    <div class="section-hold">
        <h4>Section</h4>
        <p><a href="#" class="show">find out more >></a></p>        
    </div>

    <div class="slidingDiv">            
        <h4>My content.</p>
        <p><a href="#" class="hide">close this section</a></p>
    </div>
</div>

然后，您需要一个功能来显示.slidingDiv，同时还隐藏您刚刚点击的.show链接。

$('.show').click(function (e) {
    var slider = $(this).closest('.sliderContainer').find('.slidingDiv');
    slider.show('slide');
    $(this).hide();
    e.preventDefault();
});

这会使用我添加的额外<div>来查找相关的.slidingDiv，以便您可以在页面的其他位置安全地使用它。

然后，您需要一个功能来隐藏.slidingDiv，然后再次显示.show链接。像这样：

$('.hide').click(function (e) {
    var slider = $(this).closest('.slidingDiv');
    slider.hide('slide');
    $('.show').show();
    e.preventDefault();
});

那应该是它。这是工作代码的jsfiddle：http://jsfiddle.net/d9UeL/

希望有所帮助。

jquery slidetoggle显示/隐藏链接不同

1 个答案: