Как сжимать ` 44` при использовании jquery `.slidedown()`

Question

Прошу прощения, если вопрос запутан.

В принципе, у меня есть код jquery, и что он делает, он отображает контент в пределах div, который вложен в li. Что происходит, когда я нажимаю на заголовок, а контент падает, он визуально отображает следующий заголовок вниз, но если вы щелкнете в любом месте уже отображаемого содержимого, он не будет соскальзывать обратно, он покажет следующий контент.

< ~~ на этой тестовой странице, где вы можете увидеть пример, просто нажмите на заголовок с +, и он работает, пока вы не захотите его закрыть.

Я не уверен, что вызывает проблему.

EDIT я заметил знак «+» показывает вверх чуть выше картина в разделе Создайте свою собственную страницу по сбору средств», то есть, когда появляется следующий заголовок, когда разрушился, но плюс знак находится в пределах диапазона, что является абсолютным, поэтому он должен двигаться вниз тоже не так ли?

HTML: 
    <ul id="toggle-view"> 
     <li> 
      <h6>Choose a fundraising idea</h6> 
      <span>+</span> 
      <div class="panel"> 
       <p>here are countless ways to contribute! Shave your head, run a marathon, or give up your birthday - the choice is yours! We've listed some of our most popular fundraising ideas but feel free to run with your own idea by choosing the 'Other' stream.</p> 

       <br> 

       <img src="../images/content/pagebuilder/ChooseAStream_screenshot.png" alt="Choose a Stream screenshot" width="100%"/> 

      </div> 
     </li> 
     <li> 
      <h6>Create your own fundraising page</h6> 
      <span>+</span> 
      <div class="panel"> 
       <p>Click on 'Register' to set up a fundraising page. You can set one up on your own or create a page where friends or colleagues can join you. Let us know what kind of fundraiser you're holding and we'll provide you with all the tools to help you succeed.</p> 

       <br> 
       <img src="../images/content/pagebuilder/PersonalPage_screenshot.png" align="left" alt="Personal page screenshot" width="100%"/> 

      </div> 
     </li> 
     <li> 
      <h6>Access your Participant Centre</h6> 
      <span>+</span> 
      <div class="panel"> 
       <p>As a Canadian Cancer Society cancer fighter, you have access to an online Participant Centre where you&#8217;ll find customizable, interactive tools to get people excited about sharing in your fundraising success!</p> 

       <img src="../images/content/pagebuilder/ParticipantCentre_screenshot.png" align="left" alt="Participant Centre screenshot" width="100%"/> 

      </div> 
     </li> 
    </ul> 

CSS: 
/*Drop Down Content*/ 
#toggle-view { 
    list-style:none;  
    font-family:arial; 
    font-size:11px; 
    margin:0; 
    padding:0; 
    width: 50%; 
} 

    #toggle-view li { 
     margin:10px; 
     border-bottom:1px solid #ccc; 
     position:relative; 
     cursor:pointer; 
    } 

    #toggle-view h6 { 
     margin:0; 
     font-size:14px; 
    } 

    #toggle-view span { 
     position:absolute; 
     right:5px; top:0; 
     color:#3498db; 
     font-size:13px; 
    } 

    #toggle-view .panel { 
     margin:5px 0; 
     display:none; 
    } 

jQuery: 

    $(document).ready(function() { 

     $('#toggle-view li').click(function() { 

      var text = $(this).children('div.panel'); 

      if (text.is(':hidden')) { 
       text.slideDown('200'); 
       $(this).children('span').html('-');  
      } else { 
       text.slideUp('200'); 
       $(this).children('span').html('+');  
      } 

     }); 

    }); 

Любые предложения ?? Спасибо за ваше время!

Answer 1

проблема заключается в том, что ваш li имеет плавал изображение внутри него, но нет oat-clearing механизм после изображения. В свою очередь, вычисленная высота li не включает в себя высоту изображения, поэтому символ + появляется над изображением, прямо там, где он должен быть в соответствии с CSS.

Кроме того, из-за той же проблемы изображение находится в пространстве следующего li, в результате чего он регистрирует событие click для следующего контента, а не события для текущего содержимого. Для того, чтобы исправить это, добавьте простое правило clearfix к вашему CSS

#toggle-view li::after { 
    content: ""; 
    display: block; 
    height: 0; 
    visibility: hidden; 
    clear: both; 
} 

Это создаст мнимую блок после содержимого каждого li внутри вашего переключения ракурса ul что очистит любые плавал элементы внутренней части li

Answer 2

$('#toggle-view li').click(function() { 
 

 
    var text = $(this).children('div.panel'); 
 

 
    if (text.is(':hidden')) { 
 
    text.slideDown('200'); 
 
    $(this).children('span').append("<span> - </span>"); 
 
    } else { 
 
    text.slideUp('200'); 
 
    $(this).children('span').append("<span> + </span>"); 
 
    } 
 

 
});