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

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 上找到了客户端代码，但它没有产生预期的结果。 基本上我想隐藏桶段落的底部，它应该在单击“单击以阅读更多”时显示。我想在开始时将高度限制为 50px，但它应该在点击时展开。

Answer 1

解决这个问题的快速方法是将事件处理程序附加到模板本身。如果您的模板在 {{#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');
  }
});

Answer 2

试试这个：

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

.bucket{
    height: 50px;
}

.big{
    height: auto;
}

<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>

Answer 3

你真的想toggle 'bucket' 类吗？我不这么认为，因为您正在使用它来查找您的元素。另外，我觉得你可以马上用.closest()抢到你的.bucket：

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

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

注意：

您的 html 不尊重所有规则和约定。未被无序或有序列表包裹的嵌套<li> 无效。考虑以不同的方式构建代码：

html

<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>   
    <!-- more list items here -->
</ul>

js

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

用这个fiddle 玩。