jQuery, не отображающий запрошенные данные по щелчку

Question

Это довольно важный вопрос. Я привязал маленький глификон к событию клика, чтобы показать некоторые данные по щелчку. Я связал вещи с событиями миллион раз, но на этот раз он не работает по какой-то смешной причине. Во всяком случае, триггер щелчка работает очень хорошо, я попытался поставить предупреждение в обратном вызове, и все в порядке, но это всего лишь материал, который я хочу показать, который не отображается.

Во всяком случае, вот мой код:

<div class="options"> 
    <span id="resize-toggle" class="glyphicon glyphicon-resize-small valign-middle pointer" title="Resize images during the upload"></span> 
    <span id="thumb-toggle" class="glyphicon glyphicon-adjust valign-middle pointer" title="Adjust the output thumnail width measured in pixels"></span> 

    <div id="thumb-options" class="hidden"> 
     &nbsp; 
     <div class="form-group"> 
      <div class="btn-group mg-top" data-toggle="buttons"> 
       <label class="btn btn-default btn-xs"><input type="radio" id="width-90" value="90">90</label> 
       <label class="btn btn-default btn-xs active"><input type="radio" id="width-110" value="110">110</label> 
       <label class="btn btn-default btn-xs"><input type="radio" id="width-130" value="130">130</label> 
       <label class="btn btn-default btn-xs"><input type="radio" id="width-160" value="160">160</label> 
       <label class="btn btn-default btn-xs"><input type="radio" id="width-200" value="200">200</label> 
      </div> 
     </div> 
    </div> 
</div> 

Это МИНУС:

.options { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
    min-width: 500px; 
    text-align: right; 
    border: 1px solid black; 

    .form-group { 
     display: inline-block; 
     margin: 0; 
    } 

    #thumb-options { 
     display: inline-block; 
    } 
} 

Итак, #thumb-toggle предполагается довести до #thumb-options. Я пробовал использовать классы заранее, но я стал отчаянным и начал пробовать его с идентификаторами.

Мое первоначальное намерение состоит в том, чтобы переключатели сдвигались с правой стороны, нажимая маленькие глификоны по пути.

Может ли кто-нибудь помочь мне найти проблему, почему jQuery не работает и как добиться этого слайда до нужного эффекта?

Это JQuery Я использую:

$('#thumb-toggle').click(function(){ 
    alert('Here we are'); // Works! 
    $('#thumb-options').fadeIn('fast'); // This doesn't work 
}); 

Answer 1

Вот a jsfiddle за то, что де ниже. Это упрощенная версия, которая работает.

Вы не показали класс hidden, но проблема может заключаться в том, что вы используете FadeIn на элементе invisible. Если вы хотите, чтобы элемент был невидим и поэтому способствует макету йота, то вы должны использовать что-то вроде:

$('#thumb-options').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 200); 

Если вы хотите использовать FadeIn тогда вы будете нуждаться в $('#thumb-options') первоначально имеют display:none

Answer 2

первых, попробуйте сделать класс «шкуру» вместо «скрытый»

<div id="thumb-options" class="hide"> 

, если он по-прежнему не работает, попробуйте это:

<div id="thumb-options" style="display:none;"> 

Answer 3

Я бы предложил просто переключить класс css и настроить visiblity только css. (я не хотел бы использовать идентификаторы так широко Вы можете использовать классы вместо этого.).

HTML:

<div id="thumb-toggle">Click me</div> 
<div id="thumb-options" class="hidden"> 
    ... 
</div> 

Javascript:

var $thumb_toggler = $('#thumb-toggle'); 
$thumb_toggler.click(function(){ 
    $thumb_toggler.toggleClass('hidden'); 
}); 

С первого клика на $thumb_toggler класс hidden будет удаляться из элемента #thumb-options. При следующем нажатии класс hidden будет добавлен в список его классов.