javascript - jQuery 在点击时不显示请求的数据

Question

这几乎是一个初学者问题。我已经将一个小字形图标绑定(bind)到点击事件以显示点击时的一些数据。我已经将东西绑定(bind)到事件上百万次了，但这次它出于某种有趣的原因不起作用。无论如何，点击触发器工作得很好，我已经尝试在回调中放置一个警报并且它没问题，但它只是我想要显示的东西没有显示。

无论如何，这是我的代码:

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

这是 LESS:

.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。我之前尝试过使用类，但我变得绝望并开始尝试使用 ID。

我的初衷是让单选按钮从右边滑动，沿途插入小字形。

有人可以帮我找到 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。如果您希望元素不可见并因此有助于 dom 的布局，那么您应该使用类似的东西:

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

如果你想使用 FadeIn 那么你将需要 $('#thumb-options') 初始有 display:none