jquery toggle - повторяющийся двойной эффект переключения + не остается открытым - PullRequest
Новая
       27

jquery toggle - повторяющийся двойной эффект переключения + не остается открытым

1 голос
/ 13 марта 2011

У меня есть скрытый контент WordPress с помощью эффекта переключения jquery.Проблема в том, что когда содержимое переключается, 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>

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

1 Ответ

1 голос
/ 13 марта 2011

Ваш 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>

старое решение

измените класс css .expand, добавив { display:none} и исключив $(".expand").hide() из документа, готового. По крайней мере, это более быстрая загрузка страницы, и анимация hide () при загрузке страницы может выглядеть прерывисто на некоторых машинах. Я видел, как .hide () и .toggle () сражались немного раньше, но никогда не могли определить причину. (старая страница с древним JS на нем) Я избавился от этого, просто благодаря удаче, используя только .toggle () на странице. Я уклонялся от более детективной работы из-за нехватки времени.

...