jquery toggle - 重复双切换效果+不保持打开状态

标签 jquery css toggle slide

我使用 jquery 切换效果隐藏了我的 wordpress 帖子内容。问题是当内容被切换时，jquery 将表现得好像它正在执行 2x 效果然后不会保持打开状态(默认情况下它是隐藏的，这就是我想要的，然后当我切换它时它会打开，关闭，打开，闭嘴)。

为什么 Action 会像那样重复，我怎样才能让它保持打开状态？它与 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>

CSS

html, body {
    height: 100%;
    width: 100%;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#000000;
    background: #FFFFFF;
    line-height:1.5;
    text-align:center;
}
h1 {
    background-color:#FFFFFF;
    font-size:48px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-5px;
    line-height:75%;
    padding:0px 10px 0px 0px;
    float:left;
    background-color:#FFFFFF;
}
h2 {
    /*height: 71px;*/
    font-size:42px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-5px;
    line-height:85%;
    color:#000000;
    margin:0px;
    padding:0px 0px 0px 1px;
    background-color:#FFFFFF;
}
h3 {
    font-size:24px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-2px;
    padding:20px 0px 10px 0px;
}
h1 a:link {
    text-decoration:none;
    color:#000000;
}
h1 a:visited {
    text-decoration:none;
    color:#000000;
}
h1 a:hover {
    text-decoration:none;
    color:#000000;
}
#wrapper {
    width:960px;
    height:100%;
    margin: 0 auto;
    text-align:left;
}
#barCode {
    width: 960px;
    height: 10px;
    text-align:right;
    margin:1px 0px 0px 0px;
    padding:14px 0px 0px 0px;
}
#tagLine {
    font-size:12px;
    text-indent:5px;
    letter-spacing:10px;
    clear:both;
}
#menuWrapper {
    background-color:#000000;
    width: 940px;
    height:35px;
    padding:0px 20px 0px 0px;
}
.menu {
    font-size:10px;
    font-weight:bold;
    text-transform:uppercase;
    text-align:right;
    letter-spacing:0px;
    line-height:90%;
    color:#FFFFFF;
    margin:4px 0px 0px 0px;
    float:right;
}
.menu ul {
    list-style:none;
}
.menu ul li {
    display: block;
}
.menu a:link {
    text-decoration:none;
    color:#FFFFFF;
}
.menu a:visited {
    text-decoration:none;
    color:#FFFFFF;
}
.menu a:hover {
    text-decoration:none;
    color:#FFFFFF;
}
.menuSpacer {
    width:1px;
    height:25px;
    margin:5px 20px 0px 20px;
    background-image:url(images/menuSpacer.jpg);
    float:right;
}
.mainCategory {
    font-size:10px;
    font-weight:bold;
    text-transform:uppercase;
    text-align:left;
    line-height: 90%;
    letter-spacing:0px;
    color:#FFFFFF;
    width: 940px;
    height:27px;
    background-color:#000000;
    margin:20px 0px 0px 0px;
    padding:8px 0px 0px 20px;
        clear:both;
}
.maxMin {
    background:url(images/maxMinBtn.jpg) top right no-repeat;
    width: 10px;
    height: 10px;
    display: block;
    position:relative;
    left:910px;
    top:-19px;
}
.active {
    background-position: bottom;
}
.toggleMainCategory {
    background-color:#000000;
    width:960px;
    color:#FFFFFF;
}
.postWrapper {
    width:840px;
    padding:90px 60px 20px 60px;

}
.post {
    background-color:#000000;
    height:72px;
        clear:both;
}
.postTitleBar {
    width:839px;
    height:10px;
    padding:0px 0px 0px 1px;
    background-color:#FFFFFF;
    font-size:8px;
    text-transform: uppercase;
    font-weight:bold;
    letter-spacing:0.2px;
    letter-spacing:0px;
    line-height:130%;
    color:#000000;
    clear:both;
}
.post h2 {
    font-size:30px;
    height:36px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-3px;
    line-height:85%;
    color:#FFFFFF;
    margin:0px 0px 0px -2px;
    background-color:#000000;
    float:left;
        position: relative;
        z-index: 1;
}
.cCLeft {
    margin:5px 0px 0px 0px;
    float:left;
    clear:left;
        position: relative;
        z-index: 1;
;
}
.cCMiddle {
    margin:18px 5px 5px 10px;
    font-size:9px;
    font-weight:normal;
    float:left;
        position: relative;
        z-index: 1;
}
.cCRight {
    font-size:9px;
    padding:18px 0px 0px 0px;
    float:right;
        position: relative;
        z-index: 1;
}
.expand {
        width: 839px;
    font-size:9px;
    padding:18px 0px 0px 0px;
        float:left;
        clear: left;
        position: relative;
        z-index: 2;
}
.singlePageBg {
    width:840px;
    background-color:#000000;
    color:#FFFFFF;
    padding:90px 60px 60px 60px;
    overflow:auto;
}
.anfang {
    color: #FFFFFF;
    display: inline;
    float: left;
    font-size: 35px;
    line-height: 10px;
    margin: 11px 5px 0px 0px;
    text-transform: uppercase;
}
.singleText {
    font-weight:normal;
    margin:20px 0px 40px 0px;
}
.gallery img {
    margin:0px;
    padding:0px;
    border: 0px;
    background-color:#FFFFFF;
    cursor:default; 
}
.gallery-icon {
    margin:0px;
    padding:0px;
}
.gallery-item {
    margin:0px;
    padding:0px;
    text-align:center;
}
.gallery {
    margin: 0px;
    padding:0px;
}
.video {
    text-align:center;
}
.share {
    text-align:right;
    font-size:8px;
    letter-spacing:0.2px;
    text-transform:uppercase;
    margin:20px 0px 0px 0px;
}
.aboutHolder {
    width:900px;
    padding:70px 0px 40px 60px;
}
.about {
    width:360px;
    font-weight:normal;
    color:#FFFFFF;
    background-color:#000000;
    margin:0px 0px 20px 0px;
}
.about h2 {
    width:838px;
    height:26px;
    font-size:30px;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing:-4px;
    line-height:90%;
    margin:0px;
    padding:0px;
    background-color:#FFFFFF;
    color:#000000;
}
.contactHolder {
    width:900px;
    padding:70px 0px 40px 60px;
}
.contact {
    font-size:30px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:-2px;
    line-height:85%;
    color:#FFFFFF;
    background-color:#000000;
}
.contact h2 {
    width:838px;
    height:10px;
    font-size:8px;
    text-transform: uppercase;
    font-weight:bold;
    letter-spacing:0.2px;
    letter-spacing:0px;
    line-height:130%;
    margin:0px 0px -25px 0px;
    padding:0px 0px 0px 1px;
    background-color:#FFFFFF;
    color:#000000;
}
.smallerFontSize {
    text-transform:uppercase;
    font-size: 8px;
    letter-spacing:0.2px;
}
.description {
    text-transform:uppercase;
    font-size: 8px;
    letter-spacing:0.2px;
}
.description p {
    margin:0px;
    padding:0px;
}
.fontColorWhite {
    color:#FFFFFF;
}
.fontColorBlack {
    color:#000000;
}
a:link {
    text-decoration:none;
    color:#FFFFFF;
}
a:visited {
    text-decoration:none;
    color:#FFFFFF;
}
a:hover {
    text-decoration:none;
    color:#FFFFFF;
}
#footerTypoSmall {
    font-size:12px;
    letter-spacing:10px;
    text-align:right;
    text-transform:lowercase;
    margin:0px 5px 0px 0px;
    clear:both;
}
#footerTypo {
    background-color:#FFFFFF;
    font-size:48px;
    font-weight:bold;
    color:#000000;
    text-transform:uppercase;
    letter-spacing:-5px;
    line-height:100%;
    padding:0px 0px 0px 5px;
    margin:0px 0px -14px 0px;
    position:relative;
    top:-10px;
    float:right;
}
.footerLink {
    color:#FFFFFF;
    background-color:inherit;
    font-size:8px;
    text-decoration:none;
}
#footer {
    text-transform:uppercase;
    font-size:8px;
    line-height:100%;
    color:#FFFFFF;
    width: 940px;
    height:30px;
    background-color:#000000;
    margin:20px 0px 0px 0px;
    padding:5px 0px 0px 20px;
    clear:left;
}
#bottomSpacer {
    width: 960px;
    height:105px;
    background-color:#FFFFFF;
}
#wrapperComment {
    width: 320px;
    margin: 0 auto;
    padding:0px 0px 30px 0px;
    text-align:left;
}

最佳答案

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

$(document).ready(function(){ ... your code here ... })

多次浏览您的文档。这将在不同的浏览器上产生相当不稳定的行为。

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

旧的解决方案

通过添加 { display:none} 更改 css .expand 类，并在文档准备好时放弃 $(".expand").hide()。至少，它可以加快页面加载速度，并且页面加载时的 hide() 动画在某些机器上可能会出现抖动。我以前见过 .hide() 和 .toggle() 打架，但永远无法确定是什么原因造成的。 (上面有古老的 JS 的旧页面)我完全幸运地摆脱了它，只在页面上使用 .toggle() 。由于时间限制，我回避了更多的侦探工作。

关于jquery toggle - 重复双切换效果+不保持打开状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5286028/

上一篇：javascript - Chrome 10 : Custom Video Interface Problem

下一篇：html - 更改 PHP Echo 输出的字体大小

相关文章：

css - 如何控制边框底部长度？

javascript - 具有绿色/黄色/红色渐变的 Highcharts solidgauge

java - Spring 中的动态特征标志

javascript - jQuery 检测 child <ul>

jquery - DataTables 一页中多个表的多种样式

jquery - 折叠div的响应式设计方法

javascript - 使用 jQuery 测试 html lang 属性

html - 在页面中央以html格式打印文本

javascript - 如何在 html 中使用纯 javascript 切换类

javascript - 如何使用 jquery 更改选项框的宽度(独立于选择宽度)？

©2024 IT工具网  联系我们