0

ここでjsfiddleを参照してください

「続きを読む」リンクをスライドダウンさせ、クリックすると非表示のコンテンツを表示しようとしていますが、クリック機能が正しく登録されていないようです。私は明らかに間違ったことをしましたか？

基本的なhtmlレイアウト

<div id="wrapper">
    <div id="aHidden">some long text here</div> <!--defaulted hidden with css-->
    <div id="aBtn" class="bio-readMore">read more...</div>
</div>

これを行うために使用しようとしているjQueryは次のとおりです。

$(document).ready(function() {
    $("div").each(function(idx) {
        if ($(this).hasClass('bio-readMore')) {
            var thename = this.id.replace("Btn", "Hidden");
            var sel = "#" + thename;
            $(sel).click(function() {
                alert("running click for element with value " + this.id);
                if ($(this).is(":hidden")) {
                    $(this).slideDown("slow");
                } else {
                    $(this).slideUp();
                }
            });
        }
    });
});​
4

4 に答える 4

7

既存のマークアップを使用すると、クリック登録を次のように簡単に置き換えることができます。

$(".bio-readMore").on("click", function(){
    $(this).prev().slideToggle();
});

jsfiddle の例

コードを修正したい場合は、いくつかのセレクターを逆にします。

$(document).ready(function() {
    $("div").each(function(idx) {
        if ($(this).hasClass('bio-readMore')) {
            var thename = this.id.replace("Btn", "Hidden");
            var sel = "#" + thename;
            $(this).click(function() {  //<--- On the <a/> not the hidden element
                alert("running click for element with value " + this.id);
                if ($(sel).is(":hidden")) { // <----you want to check the hidden not the <a/>
                    $(sel).slideDown("slow");
                } else {
                    $(sel).slideUp();
                }
            });
        }
    });
});​

jsfiddle の例

于 2012-10-16T15:07:28.537 に答える
1

クリック イベントを隠し要素にバインドしていました。必要なのは..read more、対応するセクションの可視性に基づいて、クリック ハンドラーを div と slideUp/Down にバインドすることです。

デモ: http://jsfiddle.net/5Hejm/15/

    $('div.bio-readMore').click(function() {
        var thename = this.id.replace("Btn", "Hidden");
        var $sel = $("." + thename);
        var $this = $(this);

        if ($sel.is(":hidden")) {
            $sel.slideDown("slow");
            $this.text('...read less');
        } else {
            $sel.slideUp();
            $this.text('...read more');
        }

    });
于 2012-10-16T15:08:16.113 に答える
1

それを私が直した ：

$("div").each(function(idx) {
    if ($(this).hasClass('bio-readMore')) {
        var thename = this.id.replace("Btn", "Hidden");
        var sel = "#" + thename;
        console.log(sel);
        $(this).click(function() {
            if ($(sel).is(":hidden")) {
                $(sel).slideDown("slow");
            } else {
                $(sel).slideUp();
            }
        });
    }
});

デモンストレーション

クリックする要素と表示/非表示にする要素を混同していました。

于 2012-10-16T15:02:43.380 に答える
0

これがあなたが探しているものだと思います

$(document).ready(function() {
  $(".bio-readMore").click(function() {
            if ($(this).prev().is(":hidden")) {
                  $(this).prev().slideDown("slow");
                 $(this).text(" ...read less");
            } else {
                 $(this).prev().slideUp();
                  $(this).text(" ...read more");
            }
        });
});​

jsfiddle http://jsfiddle.net/5Hejm/31/

于 2012-10-16T15:13:31.260 に答える