Переключить текст не отображается

В некоторых других случаях команда .toggle() работает очень хорошо. Даже сравнение этих частей кода не решило проблему, поэтому мне нужна ваша помощь! При нажатии на Learn more он должен исчезнуть, и должен появиться текст в <c>. Но он появляется на секунду, и после этого он исчезает.Переключить текст не отображается

Заранее благодарен!

$(document).ready(function() { 
 
    $(".interests").click(function() { 
 
     $(".interests").fadeToggle(300); 
 
     $(".int").fadeToggle(300); 
 
    }); 
 
});

.supporting { 
 
    padding-top: 80px; 
 
    padding-bottom: 100px; 
 

 
} 
 

 
.supporting .col { 
 
    float: left; 
 
    width: 33%; 
 
    font-family: 'Raleway', sans-serif; 
 
    text-align: center; 
 
    margin-bottom: 24px; 
 
} 
 

 
.supporting img { 
 
    height: 32px; 
 
    margin-top: 40px; 
 
} 
 

 
.supporting h2 { 
 
    font-weight: 600; 
 
    font-size: 23px; 
 
    text-transform: uppercase; 
 
    padding: 0 50px; 
 
    margin-bottom: 30px; 
 
} 
 

 
.supporting a { 
 
    font-size: 10px; 
 
    color: rgb(51,51,51); 
 
    font-weight: 600; 
 
    border: 1px solid rgb(51,51,51); 
 
    padding: 15px 50px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1.1px; 
 
} 
 

 
.supporting .int c { 
 
    font-size: 10px; 
 
    color: rgb(51,51,51); 
 
    padding: 15px 50px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>JFP</title> 
 
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css"> 
 
     <link rel="stylesheet" href="/static/main.css" > 
 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
    <script src="/static/app.js"></script> 
 
</head> 
 

 
<div class="supporting"> 
 
    <div class="container"> 
 
     <div class="col"> 
 
      <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg"> 
 
      <h2>Support</h2> 
 
      <p></p> 
 
      <div class="interests"> 
 
       <a>Learn more</a> 
 
       <div class="int" style="display:none"> 
 
        <c>Lorem ipsum.</c> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

источник

2015-09-12 iJup

Проблема в том, что вы скрываете весь контейнер, а не отдельный элемент.

Это должно быть так:

<div class="supporting"> 
    <div class="container"> 
     <div class="col"> 
      <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg"> 
      <h2>Support</h2> 
      <p></p> 
      <div class="interests"> 
       <a class=learn-more">Learn more</a> 
       <div class="int" style="display:none"> 
        <c>Lorem ipsum.</c> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

и код вроде этого:

$(document).ready(function() { 
    $(".interests").click(function() { 
     $(".learn-more").fadeToggle(300); 
     $(".int").fadeToggle(300); 
    }); 
});

Что вы делали прятался весь .interests контейнер. это означает, что хотя могут быть видны .int и .learn-more; тот факт, что родительский класс .interests не отображается, означает, что все дочерние элементы и кнопка сами не видны.

Таким образом, вы также не смогли нажать кнопку повторно, поскольку она больше не отображается на странице!

источник

2015-09-12 11:50:59

Вам просто нужно удалить interests класс из DIV и добавить тот же класс для тега привязки. вроде как,

<div class="supporting"> 
    <div class="container"> 
     <div class="col"> 
      <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg" width='20px'> 
      <h2>Support</h2> 
      <p></p> 
      <div> 
       <a class="interests">Learn more</a> 
       <div class="int" style="display:none"> 
        <c>Lorem ipsum.</c> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

И я создал JSfiddle проверить его.

источник

2015-09-12 11:50:41 GAMITG

Переключить текст не отображается

ответ

Смежные вопросы