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

我修好了它 ：

$("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 回答
1

您将单击事件绑定到隐藏元素。您需要将单击处理程序绑定到..read morediv 和基于相应部分的可见性的 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 回答
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 回答