jquery切换-重复的双切换效果+；不营业

我使用jquery切换效果隐藏了我的wordpress帖子内容。问题是，当内容被切换时，jquery的行为就像它在做2x效果一样，然后不会保持打开状态（它在默认情况下是隐藏的，这是我想要的，然后当我切换时，它将打开、关闭、打开、关闭）

为什么这个动作是重复的，我怎样才能让它保持开放？它是否与css clear或float属性有关

以下是特定部分的html和整个页面的css：

HTML

     <div class="postWrapper">
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div class="post">
      <div class="postTitleBar">title</div>
      <div class="cCLeft">
        <h2 class="post">
          <?php the_title(); ?>
        </h2>
      </div>
      <div class="cCMiddle"> added
        <?php the_time('F jS Y') ?>
        |
        <?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?>
      </div>

<script>

$(document).ready(function() {

 // hides the slickbox as soon as the DOM is ready
  $('.expand').hide();
 // toggles the slickbox on clicking the noted link  
  $('a.moreless').click(function() {
    $(this).closest('.post').find('.expand').toggle(400);
    return false;
  });
});

</script>

<div class="cCRight">
<a class="moreless" href="#"> More / Less</a>
</div>


<div class="expand">
<?php the_content(); ?>
</div>

---

您的问题中的html不正确。你在复制同样的东西

$（文档）.ready（函数（）{ …您的代码在这里…}） 多次浏览您的文档。这将在不同的浏览器上产生相当不稳定的行为

   <div class="post">
          <div class="postTitleBar">title</div>
          <div class="cCLeft">
            <h2 class="post">
              004        </h2>
          </div>
          <div class="cCMiddle"> added
            March 12th 2011        |
            <a href="http://onefourteen.org/?p=347#respond" title="Comment on 004">0 Comments</a>      </div>

    <script>

    $(document).ready(function() {

     // toggles the slickbox on clicking the noted link  
      $('a.moreless').click(function() {
        $(this).closest('.post').find('.expand').toggle(400);
        return false;
      });
    });

    </script>

    <div class="cCRight">
    <a class="moreless" href="#"> More / Less</a>
    </div>
    <div class="post">
          <div class="postTitleBar">title</div>
          <div class="cCLeft">
            <h2 class="post">
              002        </h2>
          </div>
          <div class="cCMiddle"> added
            March 12th 2011        |
            <a href="http://onefourteen.org/?p=341#respond" title="Comment on 002">0 Comments</a>      </div>

    <script>

    $(document).ready(function() {

     // toggles the slickbox on clicking the noted link  
      $('a.moreless').click(function() {
        $(this).closest('.post').find('.expand').toggle(400);
        return false;
      });
    });

    </script>

    <div class="cCRight">
    <a class="moreless" href="#"> More / Less</a>
    </div>


    <div class="expand">
    <p>test</p>
    </div>




        </div>


<div class="expand">
<p>testing</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>2134</p>
<p>234</p>
<p>&nbsp;</p>
<p>234</p>
</div>




    </div>

标题
004
补充
2011年3月12日|
$（文档）.ready（函数（）{
//单击标记的链接时切换滑动框
$（'a.moreless'）。单击（函数（）{
$（this）.closest（'.post'）.find（'.expand'）.toggle（400）；
返回false；
});
});
标题
002
补充
2011年3月12日|
$（文档）.ready（函数（）{
//单击标记的链接时切换滑动框
$（'a.moreless'）。单击（函数（）{
$（this）.closest（'.post'）.find（'.expand'）.toggle（400）；
返回false；
});
});
试验

测试



2134

234


234

---

老办法

---

通过添加

{display:none}

更改css.expand类，并在文档就绪时放弃

$（“.expand”）.hide（）

。至少，页面加载速度更快，页面加载时的hide（）动画在某些机器上可能会出现抖动。我以前见过.hide（）和.toggle（）打架，但始终无法锁定是什么导致了这场争斗。（上面有古老的JS的旧页面）我通过在页面上使用.toggle（）摆脱了它，这纯粹是运气使然。由于时间限制，我回避了更多的侦探工作。

你的html在你的问题中是不正确的。你在复制同样的东西

$（文档）.ready（函数（）{ …您的代码在这里…}） 多次浏览您的文档。这将在不同的浏览器上产生相当不稳定的行为

   <div class="post">
          <div class="postTitleBar">title</div>
          <div class="cCLeft">
            <h2 class="post">
              004        </h2>
          </div>
          <div class="cCMiddle"> added
            March 12th 2011        |
            <a href="http://onefourteen.org/?p=347#respond" title="Comment on 004">0 Comments</a>      </div>

    <script>

    $(document).ready(function() {

     // toggles the slickbox on clicking the noted link  
      $('a.moreless').click(function() {
        $(this).closest('.post').find('.expand').toggle(400);
        return false;
      });
    });

    </script>

    <div class="cCRight">
    <a class="moreless" href="#"> More / Less</a>
    </div>
    <div class="post">
          <div class="postTitleBar">title</div>
          <div class="cCLeft">
            <h2 class="post">
              002        </h2>
          </div>
          <div class="cCMiddle"> added
            March 12th 2011        |
            <a href="http://onefourteen.org/?p=341#respond" title="Comment on 002">0 Comments</a>      </div>

    <script>

    $(document).ready(function() {

     // toggles the slickbox on clicking the noted link  
      $('a.moreless').click(function() {
        $(this).closest('.post').find('.expand').toggle(400);
        return false;
      });
    });

    </script>

    <div class="cCRight">
    <a class="moreless" href="#"> More / Less</a>
    </div>


    <div class="expand">
    <p>test</p>
    </div>




        </div>


<div class="expand">
<p>testing</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>2134</p>
<p>234</p>
<p>&nbsp;</p>
<p>234</p>
</div>




    </div>

标题
004
补充
2011年3月12日|
$（文档）.ready（函数（）{
//单击标记的链接时切换滑动框
$（'a.moreless'）。单击（函数（）{
$（this）.closest（'.post'）.find（'.expand'）.toggle（400）；
返回false；
});
});
标题
002
补充
2011年3月12日|
$（文档）.ready（函数（）{
//单击标记的链接时切换滑动框
$（'a.moreless'）。单击（函数（）{
$（this）.closest（'.post'）.find（'.expand'）.toggle（400）；
返回false；
});
});
试验

测试



2134

234


234

---

老办法

---

通过添加

{display:none}

更改css.expand类，并在文档就绪时放弃

$（“.expand”）.hide（）

。至少，页面加载速度更快，页面加载时的hide（）动画在某些机器上可能会出现抖动。我以前见过.hide（）和.toggle（）打架，但始终无法锁定是什么导致了这场争斗。（上面有古老的JS的旧页面）我通过在页面上使用.toggle（）摆脱了它，这纯粹是运气使然。由于时间限制，我回避了更多的检测工作。

请发布生成的实际标记，而不是PHP源代码。A或者会很好。我有点困惑，我想是吗？我包括了java和div，其中有我的切换链接“cCRight”和隐藏内容“expand”。我是@MattBall，我们需要更多信息。请发布生成的实际标记，而不是PHP源代码。A或者会很好。我有点困惑，我想是吗？我包括了java和div，其中有我的切换链接“cCRight”和隐藏内容“expand”。我支持@MattBall，我们需要更多信息。调用

.hide（）

更好，IMHO，因为浏览器可能不支持或阻止javascript。我确信它的存在不会影响页面的外观，只是降低了美观的外观和感觉。我将其切换到您建议的css方法，并删除了.hide（），但我仍然有相同的问题（打开，关闭，打开，关闭所有动作）。@brad说得好。如果用户禁用了JS，我的点击将完全隐藏内容。我认为这取决于隐藏的内容，以及它对页面的影响。这一切都取决于具体情况。@khanvict查看html时，或多或少是“.postwrapper”的子元素吗？$（'a.moreless.）最近的（'.post'）.find（'.expand'）查找有多少个'.expans'）？页面上还有其他onClick事件吗？我想你可以这么说。postwrapper保存标题栏，然后是标题、注释，然后是moreless链接，所有这些都在单独的div中。然后在另一个分区中隐藏帖子内容。它应该只找到我在该类别下的帖子数量，目前只有4篇用于测试目的。应该还有其他onClick事件，因为我用同样的方式为posts本身扩展元素