1

ウェブサイトの一部に単純な展開/折りたたみシステムを実装しました。私はいくつかの既存のソリューションを試しましたが、サイトをそれに適合させるにはあまりにも多くの労力のように感じたので、適合する独自のソリューションを作成しました.

コードは次のとおりです。

function hide(boxtohide, boxtomodify, expandbox) {

$('#' + boxtohide).hide(300);
$('#' + boxtomodify).css('background-image', 'url("images/new/date.png")');
$('#' + boxtomodify).css('height', '69px');
$('#' + expandbox).show(300);

}

function show(boxtohide, boxtomodify, expandbox, origheight, origurl) {
$('#' + expandbox).hide(300);
$('#' + boxtomodify).css('height', origheight);
$('#' + boxtomodify).css('background-image', 'url("'+origurl+'")');
$('#' + boxtohide).show(300);


}

背後にあるロジックは次のとおりです。

  • ユーザーが非表示をクリック
  • コンテンツは非表示です
  • コンテンツ ラッパーはより薄い div に置き換えられ、
  • コンテンツ ラッパーに表示される展開ボタン (つまり、元のコンテンツを置き換えます)

逆にもう一度拡大します。

私にはコードが少しぎこちなく感じられます。私は JavaScript の達人ではないので、おそらくここで少し深みがありません。提案は大歓迎です!

デイブ

4

3 に答える 3

1

次のように、JS で最初に各要素を取得するだけでコードを高速化し、それらの CSS の変更を連鎖させることができます。

function hide(boxtohide, boxtomodify, expandbox) {

var hideElem = document.getElementById(boxtohide),
    modElem = document.getElementById(boxtomodify),
    expandElem = document.getElementById(expandbox),
    cssObj = { 'background-image' : 'url("images/new/date.png")',
               'height' : '69px' };

$(hideElem).hide(300);
$(modElem).css(cssObj);
$(expandElem).show(300);

}
于 2012-09-10T16:14:04.857 に答える
1

私が提案する唯一の明らかな変更は、次の$('#' + boxtomodify')ように圧縮できる行です。

function hide(boxtohide, boxtomodify, expandbox) {
    $('#' + boxtohide).hide(300);
    $('#' + boxtomodify).css({
        'background-image' : 'url("images/new/date.png")'),
        'height' : '69px' });
    $('#' + expandbox).show(300);
}

function show(boxtohide, boxtomodify, expandbox, origheight, origurl) {
    $('#' + expandbox).hide(300);
    $('#' + boxtomodify).css({
        'height' : origheight
        'background-image' : 'url("'+origurl+'")' });
    $('#' + boxtohide).show(300);
}
于 2012-09-10T16:11:14.233 に答える
1

この方法は複雑すぎると思います.jQueryを使用すると、最小限のコードでそのようなことを実行できます。たとえば、次のようになります。

jsfiddle

$('.toggle').on('click', 'h3', function() {
    var $content = $(this).next('.content');
    $content.slideToggle('fast');
});
于 2012-09-10T16:25:01.893 に答える