Question

html代码

<template name="Item">
    <li class="pI">
        <p class="bucket">
            <li>
                <span class= "titleBody">
                    <strong>{{{title}}}</strong>
                </span>
            </li>
            <li class="contentMain">
                {{{content}}}
            </li>
            {{>commentsTemp}}
            <a href="#">Click to read more</a>
        </p>
    </li>
</template>

客户代码

$('.pI').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    $(this).closest('.pI').find('.bucket').toggleClass('bucket big');
});

CSS代码

.bucket{
    height: 50px;
}

.big{
    height: auto;
}

我在stackoverflow上找到了客户端代码，但它没有产生所需的结果。基本上我想要隐藏桶段的底部部分，它应该显示何时＆＃34;点击阅读更多＆＃34;点击。我想在开始时将高度限制为50px，但它应该在点击时扩展。

Answer 1

你真的想要toggle'桶'课吗？我不这么认为，因为你用它来找到你的元素。此外，我认为您可以立即抓取.bucket .closest()：

$('.pI').on('click', 'a[href="#"]', function (e) {
    e.preventDefault();
    $(this).closest('.bucket').toggleClass('big');
});

这会在第一次点击时将big添加到.bucket，并在第二次点击时从存储桶中删除big。

注意：

您的HTML不尊重每个规则和惯例。未被无序或有序列表包装的嵌套<li>无效。考虑以不同方式构建代码：

HTML

<ul> <li class="pI"> title content comments <a href="#">Click to read more</a> </li>  </ul>

JS

$('.pI').on('click', 'a[href="#"]', function (e) { e.preventDefault(); $(this).prev().toggleClass('big'); });

使用此fiddle进行游戏。

Answer 2

试试这个：

＆＃13;

$('.pI').on('click', 'a[href="#"]', function (e) {
    e.preventDefault();
    $(this).prev().toggleClass('big');
});

＆＃13;

.bucket{
    height: 50px;
}

.big{
    height: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="pI">
        <p class="bucket">
          <span class= "titleBody"><strong>title</strong></span>
          <span class="contentMain">content</span>
          <span class="comments">comments</span>
        </p>
        <a href="#">Click to read more</a>
</li>
</ul>

＆＃13;

Answer 3

攻击此问题的流行方法是将事件处理程序附加到模板本身。如果您的模板在{{#each}}内重复，这一点尤其重要，因为我怀疑您的模板是。

Template.Item.events({
  'click a': function(ev){
     $(ev.target).parent('.bucket').toggleClass('big');
  }
});

ev是事件对象。 ev.target是事件的目标，$(ev.target)是DOM节点。

您甚至可以将事件附加到整个段落，以便为您的用户提供更大的点击次数：

Template.Item.events({
  'click .bucket': function(ev){
     $(ev.target).toggleClass('big');
  }
});

我希望我的<p>在点击时展开。但我无法做到

3 个答案: