-2

タラhttp://jsfiddle.net/VWCnd/8/があります。次のことをどのように行いますか: 「すべて開く」を押すと、すべて + が - に変わりますか?

html:

<a onclick=$("div[class^='spoiler_toggle']").show() style="cursor:pointer; text-decoration: underline;">expand all</a>
        /
<a onclick=$("div[class^='spoiler_toggle']").hide() style="cursor:pointer; text-decoration: underline;">close all</a>

<a href="" class="spoiler_title">Title<span class="sp_ind">+</span></a>

<div class="spoiler_toggle">
    <div class="spoiler_bg">
        <p>
artile
        </p>
    </div>
</div>

CSS:

.spoiler_title {
    display:block;
    background-color: #551A8B;
    color: #fff;
    padding: 10px 10px;
}
.spoiler_toggle {
    display:none;
}
.sp_ind{
    float: right;
    margin-right: 10px;
}
.spoiler_bg {
    background: #9C6AC9;
    padding: 1px 10px;
}

JS:

$(document).ready(function(){
 $('.spoiler_title').click(function(){
     $(this).find(".sp_ind").text(($(this).find(".sp_ind").text() == '+' ? '-' : '+'))
  $(this).parent().children('div.spoiler_toggle').toggle();
  return false;
 });
});

初心者を助けてくれてありがとう:)

4

4 に答える 4

0

JQuery を使用する場合は、コードを少し再構築することをお勧めします。まず、マークアップを次のようにクリーンアップします。

<a href="#" id="expand_all">expand all</a>
        /
<a href="#" id="close_all">close all</a>
<a href="" class="spoiler_title">Title<span class="sp_ind">+</span></a>

<div class="spoiler_toggle">
    <div class="spoiler_bg">
        <p>artile</p>
    </div>
</div>

jquery は次のようになります。

$('.spoiler_title').on("click", function(e){
    toggle();
    e.preventDefault();
});

$("#expand_all").on("click", function(e) {
    expand();
    e.preventDefault();
});

$("#close_all").on("click", function(e) {
    colapse();
    e.preventDefault();
});

var colapse = function() {
    var spoilerToggle = $(".spoiler_toggle");
    if(spoilerToggle.is(":visible")) {
        spoilerToggle.hide();
    }        
    $(".sp_ind").text("+");
};

var expand = function() {
    var spoilerToggle = $(".spoiler_toggle");
    if(!spoilerToggle.is(":visible")) {
        spoilerToggle.show();
    }     
    $(".sp_ind").text("-");
};

var toggle = function() {
    var toggleButton = $(".sp_ind");
    $(".spoiler_toggle").toggle();
    var text = toggleButton.text() === "+" ? "-" : "+";
    toggleButton.text(text);
};

これがあなたのフィドルです：http://jsfiddle.net/VWCnd/15/

于 2013-08-22T17:44:56.337 に答える
0

適切なアプローチは次のとおりです。

<a onclick="changeState('show')" ...>expand all</a>
<a onclick="changeState('hide')" ...>close all</a>

var changeState = (function() {
    var showing = false;
    return function(type) {
        if (type !== 'show' && type !== 'hide') { // 'toggle' or other
            type = showing ? 'hide' : 'show';
        }
        showing = (type === 'show');
        $("div[class^='spoiler_toggle']")[type]();
        $(".sp_ind").text(type === 'show' ? '-' : '+');
        return false;
    }
}());

$(document).ready(function(){
    $('.spoiler_title').click(function() {
        return changeState('toggle');
    });
});

このインライン ハンドラもドキュメント準備完了ブロックに移動することをお勧めしますが、それは演習として残します。(これにより、changeState 関数を内部に移動して、グローバル スコープの汚染を停止することもできます。)

于 2013-08-22T18:09:41.843 に答える