Question

我显示/隐藏这样的DIV：

HTML：

<a href="#" class="showhide" source="one"> Show/Hide </a>
<div id="one"></div>

<a href="#" class="showhide" source="two"> Show/Hide </a>
<div id="two"></div>

jQuery的：

jQuery('.showhide').live( 'click' , function () {
    source = $(this).attr("source");
    $( '#' + source ).slideToggle( 'slow' );
    return false;
});

Above code is working for me。

现在我想问两件事：

如何在Div关闭时将'显示/隐藏'更改为显示，在DIV打开时如何更改隐藏？
第一次加载页面时，如何隐藏所有这些DIV？

上述代码的任何改进也值得赞赏。

感谢。

Answer 1

示例：http://jsfiddle.net/svtTj/

<a href="#" class="showhide" data-source="one">Show</a>
<div class="showhide__box" id="one">Test one</div>

<a href="#" class="showhide" data-source="two">Show</a>
<div class="showhide__box" id="two">Test two</div>

页面加载后隐藏框的一些样式：

.showhide__box {
    display: none;
}

稍微升级的js：

$('.showhide').live( 'click' , function () {
    var _target = $( '#' + $(this).data('source') );
    $(this).text( _target.is(':visible') ? 'Show' : 'Hide' );
    _target.slideToggle( 'slow' );
    return false;
});

Answer 2

回答你的一个问题。

您可以使用document.ready隐藏页面加载中的所有内容

$(document).ready(function() {
  // hide it here
});

或在css中使用display none并应用该类

.class 
{
  display:none;
}

绝对第二种方法更好。

您可以使用jquery.text有条件地更改文本

http://api.jquery.com/text/

在你的代码里面点击，你可以做这样的事情

$(this).text("your text") //

Answer 3

您可以使用callback中的slideToggle功能根据:visible选择器更改文字。

至于隐藏div，使用您当前的标记，一个简单的next().hide();应该解决这个问题。

jQuery('.showhide').live( 'click' , function () {
    $(this).next().slideToggle( 'slow',function(){
        $(this).prev().text(function(){
         if ($(this).next().is(":visible")) return "Hide"; 
           else return "Show"; 
        });  
    } );
    return false;
}).next().hide();

示例：http://jsfiddle.net/niklasvh/pdcxs/

使用toggleSlide显示/隐藏DIV

3 个答案: