1

jquery トグルを使用して、ユーザーが見たい場合に「展開」できるコンテンツを非表示にしています。これが jsFiddle です。

http://jsfiddle.net/yjs2P/

このコードを使用して：

$.noConflict();
function toggleDiv(divId) {
   jQuery("#"+divId).toggle($);
}

ご覧のように、最初の要素は既に「閉じる」イメージ (赤) で開かれており、他の 2 つの要素は「開いた」イメージ (オレンジ) で「閉じられています」。

ここで、ユーザーがいずれかの画像をクリックすると、すべてのトグル要素が閉じられ、クリック関連の要素が開かれるようにしたいと考えています。要素が開かれると、画像は別の状態に変化する必要があるため、要素が閉じられている場合 (オレンジ)、画像が開いた状態 (赤) に変更され、その逆も同様に変更されます。

誰でもこの問題のヒントを教えてもらえますか?

事前に乾杯！

4

2 に答える 2

3

これはどうですか - まず、html にいくつかの変更を加えましょう。

id を使用せずに、代わりにクラス名で参照するという考え方に入りましょう。そのため、コンテンツ div ごとに、news-contentクラスを追加しました。

...
<div class="news-content" id="myContent">
...
<div class="news-content" id="myContent2">
...
<div class="news-content" id="myContent3">
...

次に、ハイパーリンクの href 属性からクリック ハンドラーを削除します (すぐに jQuery を使用してハンドラーを追加します)。

<a class="toggle" href="#">

すべてのCSSを削除し、ニュースコンテンツがデフォルトで非表示になっていることを確認しました

.news-content {
    display: none;
}

jQuery

これらの変更を適用したら、ハイパーリンクのクリック ハンドラーを作成して、トグルを実行できるようにします。注: toggleの代わりにslideUpとslideDownを使用しました。

フィドルはこちら

$(document).ready(function () { 
    $('a.toggle').click(function () {

        // select out the elements for the clicked item
        var $this = $(this),
            $root = $this.closest('.news-text'),
            $content = $root.find('.news-content'),
            $toggleImage = $this.find('img');

        // collapse all items except the clicked one
        $('.news-text').each(function () {
            var $itemRoot = $(this);
            if ($itemRoot == $root) return; // ignore the current
            var $itemContent = $itemRoot.find('.news-content');
            if ($itemContent.is(':hidden')) return; // ignore hidden items

            // collapse and set img
            $itemContent.slideUp(); 
            $itemRoot.find('.toggle > img').attr('src', 'http://www.70hundert.de/images/toggle-open.jpg');
        });

        // for the current clicked item either show or hide
        if ($content.is(':visible')) {
            $content.slideUp();
            $toggleImage.attr('src', 'http://www.70hundert.de/images/toggle-open.jpg');
        } else {
            $content.slideDown();
            $toggleImage.attr('src', 'http://www.70hundert.de/images/toggle-close.jpg');
        }

        // stop postback
        return false;
    });
});

更新 - 新しいバージョンの JQuery ハンドラー

フィドルはこちら

$('a.toggle').click(function () {

    var openImgUrl = 'http://www.70hundert.de/images/toggle-open.jpg',
        closeImgUrl = 'http://www.70hundert.de/images/toggle-close.jpg';

    var $newsItem = $(this).closest('.news-text'),
        $newsContent = $newsItem.find('.news-content'),
        isContentVisible = ($newsContent.is(':visible'));

    // slide up all shown news-items - but its expected that only one is visible at a time
    $('.news-text').find('.news-content').slideUp(function () { 
        // on animation callback change the img
        $('.news-text').find('.toggle > img').attr('src', openImgUrl);
    });

    if (!isContentVisible) { // if the new-item was hidden when clicked, then show it!
        $newsContent.slideDown(function () {
            // on animation callback change the img
            $newsItem.find('.toggle > img').attr('src', closeImgUrl);
        });
    }

    return false; // stop postback
});
于 2013-05-10T13:45:32.977 に答える
1

これを試して：

function toggleDiv(divId) {
    jQuery('[id^=myContent]').not("#" + divId).hide()
    jQuery("#" + divId).toggle($);
    var $img = jQuery("#" + divId).next('p').find('img');
    var src = $img.attr('src');
    $img.attr('src', (src.indexOf('close') > -1) ? src.replace('close', 'open') : src.replace('open', 'close'));
}

デモはこちら

于 2013-05-10T12:31:27.473 に答える