Элементы идентификатора класса и изображения не переключаются при нажатии

-1

Итак, у меня есть идентификатор div, который включает изображение, которое будет действовать как точка переключения, чтобы развернуть и свернуть контент для результирующих идентификаторов, находящихся под ним.Элементы идентификатора класса и изображения не переключаются при нажатии

Однако я попытался следовать предыдущей «скрипке», но у меня возникли проблемы с ее внедрением в мой проект, и я не могу заставить его работать. Изображение отображается, но нет никакого рабочего поведения. В консоли также нет ошибок. : S

Heres мой код:

HTML:

<div class="container"> 
     <div id="result_location"> 
      <h3>name and results here</h3><img src="images/minus.png" alt="collapse content icon"></img> 

     </div>  
     <div class="result_menu"> 
      <div id="film_column"> 
       <h4>('text')</h4> 
      </div>  
      <div id="time_column"> 
       <h4>('text')</h4> 
      </div>  
      <div id="genre_column"> 
       <h4>('text')</h4> 
      </div> 
       <div id="score_column"> 
       <h4>('text')</h4> 
      </div> 
     </div> 
    </div>

CSS:

.container { 

    border:0px;  
    width: 100%; 
    } 

    #result_location { 

    color: white; 
    text-align: center; 
    font-size: 0.8em; 
    position: relative; 
    text-transform: uppercase;  
    background: #2c3e50;  
    padding: 10px;    
    } 
     img { 

      height:0.5%; 
      width: auto; 
      padding: 0px; 
     } 

      #film_column, #time_column, #genre_column, #score_column { 

      background: #ecf0f1; 
      color: black; 
      font-size: 1em; 
      text-align: center; 
      display: inline-block; 
      position: absolute-relative; 
      width:100%; 
      margin-top: 0px; 
      float: left; 
      width: 100%;     
      }

$(".result_location").click(function(){ 
    $(toggle).next("#result_menu").slideToggle("slow"); 
}) 
.toggle(function() { 
    $(toggle).children("img").attr("src","images/plus.png"); 
}, function() { 
    $(toggle).children("img").attr("src","images/minus.png"); 
});

Вот скрипку я пытался повторить: http://jsfiddle.net/2UuW6/1/

источник

2014-01-03 hduncan

result_menu является классом, а не идентификатор. – Goombah

Первый шаг - .result_location должен быть #result_location. "" задает класс, у вас есть идентификатор, поэтому вам нужно «#» – n8wrl

его работающий штраф на вашем jsfiddle .. вы допустили ошибку здесь только .. – Karuppiah

Попробуй, как,

$("#result_location").click(function(){ 
    $(this).next(".result_menu").slideToggle("slow"); 
    $img=$(this).find("img"); 
    $img.attr('src', 
     $img[0].src=="images/plus.png"?"images/minus.png":"images/plus.png"); 
});

источник

2014-01-03 13:11:51

Попробуйте объяснить изменения в вашем ответе? Прояснить для OP – DaniP

Нет причин, чтобы уменьшить этот ответ, вы должны сфокусировать вопрос –

Почему так сердитый Вольф? – hduncan

Fiddle кажется работать правильно. Однако вам нужно проверить, какую библиотеку jquery вы включили в проект. Поскольку изменение библиотеки jquery до 1.10.1 скрывает элемент переключения.

Fiddle with 1.10.1 jq library

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>

источник

2014-01-03 13:20:30

Элементы идентификатора класса и изображения не переключаются при нажатии

ответ

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