Question

查看jsfiddle here

我正试图让“阅读更多”链接向下滑动并在点击时显示隐藏的内容，但我似乎无法正确注册点击功能。我做了一件明显不对的事吗？

基本的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();
                }
            });
        }
    });
});

Answer 1

使用现有标记，您可以使用以下内容轻松替换您的点击注册：

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

jsfiddle example

如果你想修改你的代码，你的一些选择器会被颠倒过来：

$(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 example

Answer 2

我修好了它：

$("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();
            }
        });
    }
});

demonstration

您混淆了要点击的元素和要显示/隐藏的元素。

Answer 3

您将click事件绑定到隐藏元素。您需要的是根据相应的部分可见性将点击处理程序绑定到..read more div和slideUp / Down。

DEMO： 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');
        }

    });

Answer 4

我认为这就是你要找的东西

$(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/

无法获得jQuery单击以正确注册元素

4 个答案: